Search⌘ K
Home
Courses
The Ultimate Guide to Redux

Reducer Nesting and Coupling

Explore reducer nesting and coupling in Redux to manage complex application state. Understand two approaches for reducer composition, their impacts on code encapsulation, and performance challenges when actions are handled across multiple nested reducers.

We'll cover the following...

Let’s try to implement a reducer that adds a new ingredient to a recipe. There are two main approaches:

  • All the reducers in the chain are aware when the action is passed.
  • Each reducer only passes the information down to its children.

We can implement the first approach as follows:

const booksReducer = (state, action) => {
  switch (action.type) {
    case ADD_INGREDIENT:
      return Object.assign({}, state, {
        books: state.books.map(
          book =>
...