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 };
  }, {});
}

@juanriglos each reducer should define its default state, not the rootReducer.

Yes i am sure about that, but tried to access a reducer state in the store, before made any action, and second the perfomance it is not the best option, it will bring the hole store always