CODEWITHSUNDEEP
javascriptreactjs
Learn to code
Learn to code

Reputation: 183

Context + Hooks or Redux

Actually I'm setting up a new project, got confused about choosing a flow:

  1. useState + useReducer + useContext

or

  1. Redux

The project is advanced and medium sized, it may leads to large app in near future or may not be.

If I go with option 1 (useState + useReducer + useContext) :

a. There is no middleware for useReducer (yet). Since it's not one global state container, it's difficult to apply such middleware globally. b. There is no native feature (yet) which combines all reducers to one ultimate reducer.

If I go with option 2, I can use the features which option 1 fails to provide.

I came across, that we can implement we can combine multiple reducers manually in option 1:

import userReducer from './reducers/user';
import basketReducer from './reducers/basket';
const mainReducer = ({ user, basket }, action) => ({
     user: userReducer(user, action),
     basket: basketReducer(basket, action)
});

and can implement middleware too 

import userReducer from './reducers/user';
import basketReducer from './reducers/basket';
const mainReducer = ({ user, basket }, action) => {
  // middleware goes here, i.e calling analytics service, etc.
  return {
    user: userReducer(user, action),
    basket: basketReducer(basket, action)
  };
});

Actually I am freezing here to choose which way is optimal to go with ?

If I'm go with Redux, I have to implement Redux, axios, saga, immutable js or other third part libs. I'll be using powerful features of Redux and also I should learn all the concepts first for Redux. Since I know Context + hooks.

Is react officials have any plans to bring those missed ingredients from Redux to hooks + context ?

Upvotes: 3

Views: 1613

Answers (2)

Dennis Vash
Dennis Vash

Reputation: 53984

Is react officials have any plans to bring those missed ingredients from Redux to hooks + context?

No, it contradicts its Design-Principles, the fact that you can implement those features by yourself (not very complicated), there are many stable and great state-managers in react's eco-system (like redux and mobx).

Common Abstraction (Design Principles): In general we resist adding features that can be implemented in userland. We don’t want to bloat your apps with useless library code. However, there are exceptions to this.

Actually I am freezing here to choose which way is optimal to go with?

This question is too broad, it depends on your application logic, it scales and if you really need all redux features.

Refer to SO question React Context vs React Redux, when should I use each one?

If I'm go with Redux, I have to implement Redux, axios, saga, immutable js or other third party libs.

Using axios (fetch) and immutable (freeze) are not bound to redux, it is also recommended to not mutate data and use immutable libraries in your application.

Moreover, you don't have to integrate saga with your redux, after getting familiar with middleware, as mentioned above, depending on your application logic you may not need saga at all.

Upvotes: 1

Joseph D.
Joseph D.

Reputation: 12174

Actually I am freezing here to choose which way is optimal to go with ?

Optimally, I would say they are both the same. They both support memoization. However, the advantage of Redux is it has a single source of truth for your entire application state.

Is react officials have any plans to bring those missed ingredients from Redux to hooks + context ?

Redux, Hooks, Context, Saga have different purposes / motivations.

Eventually, I suggest for you to use hooks + function components for the following reasons:

  1. Eliminate wrapper hell due to context providers.

  2. Handle side-effects (fetch, subscription) granularly via useEffect within functional components.

Upvotes: 1

Related Questions