Search⌘ K
Home
Courses
The Ultimate Guide to Redux

A Closer Look at Reducers

Explore how to break down Redux state management into smaller reducers responsible for different parts of the state tree. Understand the benefits of separating concerns by extracting reducers and using combineReducers to maintain cleaner, scalable code structure in your Redux projects.

We'll cover the following...

If you open the reducers/root.js file, you will find that the same reducer is now taking care of different parts of our state tree. More properties will be added to both the recipes and the ingredients subtrees as our application grows. Since the code in both handlers is not interdependent, we can split it further into three reducers, two that are responsible for different parts of the state and one to combine them:

const recipesReducer = (recipes, action) => {
  switch (action.type) {
    case 'ADD_RECIPE':
      return recipes.concat({name: action.name});
  }

  return recipes;
};

const ingredientsReducer = (ingredients, action) => { ... }

const rootReducer = (state, action) => {
  return Object.assign({}, state, {
    recipes: recipesReducer(state.recipes, action),
...