Reducer Separation

The obvious solution would be to find a way to split the reducer code into multiple files or multiple reducers. Since createStore() receives only one reducer, it will be that reducer’s job to call other reducers to help it calculate the new state.

The simplest method of determining how to split the reducer code is by examining the state we need to handle. Therefore we first declare the state as a const:

const state = {
  recipes: [],
  ingredients: [],
  ui: {}
}

We can now create three different reducers, each responsible for part of the state:

const recipesReducer = (state, action) => {};
const ingredientsReducer = (state, action)

...