Concat-Reducers

By default, Redux's combineReducers nests state, which makes it inconvenient to split a large reducer into smaller parts.

Concat-Reducers combines any number of reducers into a single reducer without nesting state, allowing you to decide how to structure state within your own app.

Installation

yarn add concat-reducers

Usage

Instead of Redux's combineReducers, do:

import concatReducers from 'concat-reducers'

import myFirstReducer from './myFirstReducer'
import mySecondReducer from './mySecondReducer'

const reducer = concatReducers(
  myFirstReducer,
  mySecondReducer
)

Further info

State that looks like this with combineReducers:

{
  myFirstReducer: {
    id: 1,
    firstReducerForm: {
      name: '',
      email: ''
    }
  },
  mySecondReducer: {
    open: false,
    secondReducerForm: {
      address: '',
      postcode: ''
    }
  }
}

would instead look like this with concatReducers:

{
  id: 1,
  firstReducerForm: {
    name: '',
    email: ''
  },
  open: false,
  secondReducerForm: {
    address: '',
    postcode: ''
  }
}

This simply allows further choice in how to structure state. Redux's nested state can be recreated if needed, but this also allows for state to be 'flattened' if you wish to do so.