Combining the useReducers Hook

combineUseReducers.js

// Main
function combineReducers(reducerDict) {
  const _initialState = getInitialState(reducerDict);
  return function(state = _initialState, action) {
    return Object.keys(reducerDict).reduce((acc, curr) => {
      let slice = reducerDict[curr](state[curr], action);
      return { ...acc, [curr]: slice };
    }, state);
  };
}

function useStore(rootReducer, state) {
  const initialState = state || rootReducer(undefined, { type: undefined });
  return useReducer(rootReducer, initialState);
}


// Usage
function reducerA(state, action) {
   // ...
}
function reducerB(state, action) {
  // ...
}
function reducerC(state, action) {
  // ...
}

const rootReducer = {
  group1: combineReducers({ a: reducerA, b: reducerB }),
  group2: reducerC
}

// Use this in a Context Provider and get access to state and dispatch
// anywhere by using useContext.
const [state, dispatch] = useStore(rootReducer) // optional state object as second arg


// Helpers
function getInitialState(reducerDict) {
  return Object.keys(reducerDict).reduce((acc, curr) => {
    const slice = reducerDict[curr](undefined, { type: undefined });
    return { ...acc, [curr]: slice };
  }, {});
}