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!