Search⌘ K
Home
Courses
The Ultimate Guide to Redux

Reducer Separation

Understand how to separate Redux reducers by handling only their relevant slices of state. This lesson teaches you to combine multiple reducers while ensuring each updates its own part of the state, leading to cleaner, more maintainable code and preventing clashes in large projects.

We'll cover the following...

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)
...