What is an example of normalizing the state in a React Redux app?

Question

I'm reading the Redux Reducers docs and don't get how normalizing the state would work. The current state in the example is this:

{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

Can you provide an example of what the above would look like if we followed the below?

For example, keeping todosById: { id -> todo } and todos: array inside the state would be a better idea in a real app, but we’re keeping the example simple.

Answer 1

This example is straight from Normalizr.

[{
  id: 1,
  title: 'Some Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}, {
  id: 2,
  title: 'Other Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}]

Can be normalized this way-

{
  result: [1, 2],
  entities: {
    articles: {
      1: {
        id: 1,
        title: 'Some Article',
        author: 1
      },
      2: {
        id: 2,
        title: 'Other Article',
        author: 1
      }
    },
    users: {
      1: {
        id: 1,
        name: 'Dan'
      }
    }
  }
}

What's the advantage of normalization?

You get to extract the exact part of your state tree that you want.

For instance- You have an array of objects containing information about the articles. If you want to select a particular object from that array, you'll have to iterate through entire array. Worst case is that the desired object is not present in the array. To overcome this, we normalize the data.

To normalize the data, store the unique identifiers of each object in a separate array. Let's call that array as results.

result: [1, 2, 3 ..]

And transform the array of objects into an object with keys as the id(See the second snippet). Call that object as entities.

Ultimately, to access the object with id 1, simply do this- entities.articles["1"].