Access to Multiple Nested Data Entities

A problem with the nested state approach is retrieving data. If we would like to show all of a user’s favorite recipes, we need to scan all the books to find the relevant ones:

const getFavorites = (state) => {
  const recipes = state.books.map(
    book => book.recipes.filter(recipe => recipe.favorite)
  );

  // Strip all null values
  return recipes.filter(recipe => recipe);
};

When working with code such as the above, any changes to the structure of the state must be reflected not just in the reducers but in the UI as well. This approach breaks the separation of concerns and increases the amount of work required for state structure changes. We discuss a better approach in the following lesson.