Introduction

While a normalized state might seem like a great idea, the returned server’s data often has a deeply nested structure. A possible example of fetching data from the /recipes/63 API endpoint might look like this:

{
  id: 63,
  name: 'Omelette',
  favorite: true,
  preparation: 'How to prepare...',
  ingredients: [
    {
      id: 5123,
      name: 'Egg',
      quantity: 2
    },
    {
      id: 729,
      name: 'Milk',
      quantity: '2 cups'
    }
  ]
};

Since the only way to update the Redux store is by sending actions to the reducers, we must build a payload that our reducers can easily handle and find a way to extract the payload from the denormalized data returned from the server.