How to combine reducers in React’s ‘useReducer’ hook?
Hey everyone!
React Hooks is a ‘it’ thing now! But beginner developers are pretty confused because they started with class components and now suddenly, some other type of state has come out of nowhere. Well, not just beginners, everyone gets confused.
This article is not about React useState
or useEffect
hook though, this is about global state management in React which is possible by useReducer
and useContext
. If you are reading this, you have probably combined useReducer
and useContext
and can skip the next section.
useReducer
+ useContext
= Super cool React Application
Redux is a very popular library for state management. It is not only used with React, but also angular. The popularity of react-redux came with the fact that we can store our website’s overall data (that is the redux store) in multiple reducers and definitely their super awesome devtool.
Reducers with Hooks
React 16.8 came up with several helpful ‘hooks’, apart from useState
and useEffect
, which are useReducer
and useContext.
useContext
is precisely an easier way to use React context API which reduces hazards of the state-prop hierarchy in react. The whole state management can be done a lot easier by combining useReducer
and useContext.
Issues with Multiple Reducers
In react-redux, it was very easy to use the combineReducers
function and keep all your reducers separate for ease of coding, because we all love modular coding :).
People have raised this issue that in Redux we can easily have several reducers and initial states and at last we combine them into one. This is very handy for large scale applications to reduce complexity. But if you don’t want to declare [state, dispatch] multiple times, you need to keep your reducers separate and combine them before calling the useReducer
hook. But how to do that?
If you take a deeper look, a reducer is just a pure function that takes the state and action as parameters and performs the state change operations. So if we could make a function that would take the same parameters, call all your reducers and check if the action type matches and returns the changed/unaffected state. This is precisely what Redux’s combine reducers function does.
I have formed a function that does the same and published it as a npm module.
Run- $ npm install react-combine-reducers
Import the function:
Import combineReducers from 'react-combine-reducers';
The function takes an object of the following structure -
const [rootReducerCombined, initialStateCombined] = combineReducers({ reducerOne: [reducerOne, initialStateOne], reducertwo: [reducerTwo, initialStateTwo] });
It will then return a clubbed reducer and initial state in the form of an array. You can use the rootReducerCombined
and initialStateCombined
and pass inside your useReducer
hook to get the overall state and dispatch function.
This is a lightweight helper utility. This is my second open source publish. It would be very helpful if you could install, use and let me know your feedback.
To view the source code, visit my github repository or react-combine-reducers on npm. Give us a star if this helped you.
Cheers!