Hooks Combine Reducers

Building a complex React app using the useReducer hook can lead to long reducers.

It's better to split reducers & states into seperate files. hooks-combine-reducers accepts multiple reducer files or states and combines them into a single object.

How To Use

Create an initial state:

const initialState = {
  key: value
};

Then create multiple reducer functions:

const reducer1 = (state, action) => {
  switch (action.type) {
    case "ACTION":
      return
    default:
      return state;
  }
};

const reducer2 = (state, action) => {
  switch (action.type) {
    case "ACTION":
      return
    default:
      return state;
  }
};

And finally combine the reducers:

  const [state, dispatch] = React.useReducer(
    combineReducers({
      keyName1: reducer1,
      keyName2: reducer2
    }),
    initialState
  );

Combining State

You may want to separate state into different objects for better organization.

import { combineReducers, combineStates } from 'hooks-combine-reducers';


const state1 = {
  ...
}

const state2 = {
  ...
}

const reducer1 = (state, action) => {
  switch (action.type) {
    case "ACTION":
      return
    default:
      return state;
  }
};

const reducer2 = (state, action) => {
  switch (action.type) {
    case "ACTION":
      return
    default:
      return state;
  }
};

const [state, dispatch] = React.useReducer(
  combineReducers({
    keyName1: reducer1,
    keyName2: reducer2
  }),
  combineStates([state1, state2])
);