Introduction

One of the main strengths of Redux is the separation of state (data) management from the presentation and logic layers. The design of the state layout can be performed separately from the design of the UI and any complex logic flows due to the division of responsibilities.

To illustrate this concept of separation, let’s consider our recipe book application. The app can manage multiple recipe books, each having multiple recipes. A recipe, in turn, is an object containing a list of ingredients, preparation instructions, images, a favorite flag, etc.:

const state = {
  books: [
    {
      id: 21,
      name: 'Breakfast',
      recipes: [
        {
          id: 63,
          name: 'Omelette',
          favorite: true,
          preparation: 'How to prepare...',
          ingredients: [...]
        },
        {...},
        {...}
      ]
    },
    {...},
    {...}
  ]
};

This state layout contains all the required information and conforms exactly to the description of our application. However, it requires complex nested reducers, and access to deeply nested data is complicated. While still workable, these problems lead to convoluted code.

Let’s explore both of them in detail in the following lessons.