flat-combine-reducers

Turns multiple reducer functions, into a single reducer function, with the support of declaring the initial states as default parameters.

It will call all the child reducers, and gather their results into a single state object by assign the result objects together from left to right. The reason for the name is it flatten the state of using the combineReducers in redux.

npm install --save flat-combine-reducers

Why

To prevent the reducer growing too large, Redux provides a function called combineReducers to let us structure the reducer. However, it will structure not only the reducer itself but also your state. Each state that managed by distinct reducer will be separated into a deep object with a specified key. Moreover, the combining logic should ideally focus on the combining only when creating the store. And each reducer should manage their own states as the default values of the first parameter. flatCombineReducers allow us to give the initial state as default parameters. Thus, it could put the responsibility of each reducer in order.

Options (Optional)

You can pass an object to its last parameter to control the flatCombineReducers' behavior.

const options = { mergePrevState: false }
flatCombineReducers(reducerA, reducerB, options)

OptionName	DefaultValue	Description
mergePrevState	true	If true, the combined reducer will assign the returned state with the previous state.

mergePrevState

With its help, you can simplify your reducer logic and avoid the boilerplate likes Object.assign({}, state, PROCESSED_STATE)

From:

function reducerA(state = initialState, action) {
  switch (action.type) {
    case ACTION_TYPE_A:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      });
    default:
      return state;
  }
}

To:

function reducerA(state = initialState, action) {
  switch (action.type) {
    case ACTION_TYPE_A:
      return {
        visibilityFilter: action.filter
      };
  }
}

Examples

Return identity reducer if parameter is empty

const reducer = flatCombineReducers();

expect(reducer({ A: 1, B: 2 }, "indifferentAction")).to.deep.equal({ A: 1, B: 2 });
expect(reducer({ A: 1, B: 2 })).to.deep.equal({ A: 1, B: 2 });
expect(reducer()).to.deep.equal({});

Note. You can change it by specifying the option mergePrevState.

Combines multiple reducers into one

const reducer = flatCombineReducers(
  (prevState, action) => ({A: prevState.A + action.value}),
  (prevState, action) => ({B: prevState.B * action.value})
);

expect(reducer({ A: 1, B: 2 }, { value: 3 })).to.deep.equal({ A: 4, B: 6 });

Supports separated initial state values as default parameters

const reducer = flatCombineReducers(
  (prevState = { A: 1 }, action) => ({A: prevState.A + action.value}),
  (prevState = { B: 2 }, action) => ({B: prevState.B * action.value})
);

expect(reducer(undefined, { value: 3 })).to.deep.equal({ A: 4, B: 6 });

Assigns the states from right to left

const reducer = flatCombineReducers(
  (prevState = { A: 1 }, action) => ({...prevState, A: prevState.A + action.value}),
  (prevState = { A: 2 }, action) => ({...prevState, A: prevState.A * action.value})
);

expect(reducer(undefined, { value: 3 })).to.deep.equal({ A: 6 });

Specify the option mergePrevState to control the behavior

const reducer = flatCombineReducers(
  (prevState, action) => ({A: prevState.A + action.value}),
  { mergePrevState: false }
);

expect(reducer({ A: 1, B: 2 }, { value: 3 })).to.deep.equal({ A: 4 });