React useReducer: How to combine multiple reducers?
Combine slice reducers (combineReducers)
The most common approach is to let each reducer manage its own property ("slice") of the state:
const combineReducers = (slices) => (state, action) => Object.keys(slices).reduce( // use for..in loop, if you prefer it (acc, prop) => ({ ...acc, [prop]: slices[prop](acc[prop], action), }), state );import a from "./Reducer1";import b from "./Reducer2";const initialState = { a: {}, b: {} }; // some state for props a, bconst rootReducer = combineReducers({ a, b });const StoreProvider = ({ children }) => { const [state, dispatch] = useReducer(rootReducer, initialState); // Important(!): memoize array value. Else all context consumers update on *every* render const store = React.useMemo(() => [state, dispatch], [state]); return ( <StoreContext.Provider value={store}> {children} </StoreContext.Provider> );};Combine reducers in sequence
Apply multiple reducers in sequence on state with arbitrary shape, akin to reduce-reducers:
const reduceReducers = (...reducers) => (state, action) => reducers.reduce((acc, nextReducer) => nextReducer(acc, action), state);const rootReducer2 = reduceReducers(a, b);// rest like in first variantCombine multiple useReducer Hooks
You could also combine dispatch and/or state from multiple useReducers, like:
const combineDispatch = (...dispatches) => (action) => dispatches.forEach((dispatch) => dispatch(action));const [s1, d1] = useReducer(a, {}); // some init state {} const [s2, d2] = useReducer(b, {}); // some init state {} // don't forget to memoize againconst combinedDispatch = React.useCallback(combineDispatch(d1, d2), [d1, d2]);const combinedState = React.useMemo(() => ({ s1, s2, }), [s1, s2]);// This example uses separate dispatch and state contexts for better render performance<DispatchContext.Provider value={combinedDispatch}> <StateContext.Provider value={combinedState}> {children} </StateContext.Provider></DispatchContext.Provider>;In summary
Above are the most common variants. There are also libraries like use-combined-reducers for these cases. Last, take a look at following sample combining both combineReducers and reduceReducers:
If you simply want to achieve a combine reducer feature without any third-party library, do it as below. (REF: Redux source/code)The working code is here https://codepen.io/rajeshpillai/pen/jOPWYzL?editors=0010
I have two reducers created, one dateReducer and another counterReducer. I am using it as
const [state, dispatch] = useReducer(combineReducers({ counter: counterReducer, date: dateReducer }), initialState);
The combineReducers code
function combineReducers(reducers) { return (state = {}, action) => { const newState = {}; for (let key in reducers) { newState[key] = reducers[key](state[key], action); } return newState; }}Usage: Extract the respective state
const { counter, date } = state;NOTE: You can add more redux like features if you wish.
The complete working code (in case codepen is down :))
const {useReducer, useEffect} = React;function dateReducer(state, action) { switch(action.type) { case "set_date": return action.payload; break; default: return state; } }function counterReducer(state, action) { console.log('cr:', state); switch (action.type) { case 'increment': { return state + 1; } case 'decrement': { return state - 1; } default: return state; }}function combineReducers(reducers) { return (state = {}, action) => { const newState = {}; for (let key in reducers) { newState[key] = reducers[key](state[key], action); } return newState; }}const initialState = { counter: 0, date: new Date};function App() { const [state, dispatch] = useReducer(combineReducers({ counter: counterReducer, date: dateReducer }), initialState); console.log("state", state); const { counter, date } = state; return ( <div className="app"> <h3>Counter Reducer</h3> <div className="counter"> <button onClick={() => dispatch({ type: 'increment'})}>+ </button> <h2>{counter.toString()}</h2> <button onClick={() => dispatch({ type: 'decrement'})}>- </button> </div> <hr/> <h3>Date Reducer</h3> {date.toString()} <button className="submit" type="submit" onClick={() => dispatch({ type: 'set_date', payload:new Date })}> Set Date </button> </div> );}const rootElement = document.querySelector("#root");ReactDOM.render(<App />, rootElement); NOTE: This is a quick hack (for learning and demonstration purpose only)
In your rootReducer.js file you can use combineReducers from redux to combine multiple reducers. The traditional way is:
import { combineReducers } from 'redux';const rootReducer = combineReducers({ name: nameReducer});export default rootReducer;You can import the rootReducer while creating the store as:
import { combineReducers } from 'redux';let store = createStore(rootReducer);While using useReducer hook you can pass the rootReducer to it:
const [state, dispatch] = useReducer(rootReducer, initialState);Hope this works for you.