React Lesson 10: Normalize Data with Immutable.js

React Lessons. Lesson 10. Normalize Data with Immutable.js

React Lessons. Lesson 10. Normalize Data with Immutable.js

In this lesson, we are going to explore how we work with data. As you can see in fixtures.js, the data structure we have used so far to display articles is not normalized. Every article contains information about it, it resembles a tree-like structure.

This kind of structure is readable, but it will become too overwhelming once you start changing the data. If you’ve got a pretty complicated structure where all the dependencies connect – for example, the article has an author, the comment has an author, and the author has his own page.

If you store it in a current state, whenever you want to change the author’s name, you will have to look through all the places where it can theoretically be used and change the data.

That’s why, before storing the data in stores they get normalized. Normalizing data simply means to store comments, articles, authors, etc. separately and store the connections separately as id.

For example, if you’ve got a lot of comments, you can initially store an array with the id of these comments.

Normalize articles

Let us first introduce a normalized data structure in rendering articles, then we will do the same with comments. We will also change the way we store the data. Right now, the data are stored in the form of a usual array, which is not very convenient. If we want to work with the data, we will need to appeal a certain element, so it will be much more convenient to store the data as objects, where ids of articles are the keys and the article itself is a value.

Step 1: Install Immutable.js

Let us continue our lesson and use the library immutable.js by running this command:


Immutable.js has various data structures. A few of the most popular are:

  • List is an array analog but immutable.
  • Map is an immutable object analog.
  • OrderedMap is a variation of Map, where you save the sequence of the added elements.
  • Record enables you to describe the structure your element has.

Let us use Record and OrderedMap in our project.

Step 2: Normalize Articles with Record and OrderedMap

A record is similar to a JS object but enforces a specific set of allowed string keys and has default values. Go to reducers/articles.js and define the structure like this:

Records always have a value for the keys they define. Removing a key from the record simply resets it to the default value for that key. By doing this, we get a guaranteed structure of your data (articles), and it will always be specially arranged.

OrderedMap is a type of Map, which has the additional guarantee that the iteration order of entries will be the order in which they were set(). Let us create OrderedMap using this Article record.

Using the reduce method, we move from the first to the last element of the array by collecting them into another structure – in our case, into immutable object acc. Also, there is el – an element we’ve been using (the first and the second articles, etc). And the initial value of acc we start with is a new OrderedMap({})).

Step 3: Change usage in a component

Next, we will need to change our API a little bit, so let us go to containers/Filters.js and do the following changes:

Earlier, we thought we would work with the array, and now we receive an object. That’s why we transform it inside the connect. To turn OrderedMap structure into Listarray we call the method valueSeq() – in this case, we’ll get just an article array.

We can also have some problems within our Select component, as we’ve expected to see an array and we get a custom structure. To avoid any errors, you need to go to options attribute and modify them into toJS():

We will also need to correct containers/Articles.js and add valueSeq():

Why do we call valueSeq()?

Because articles are an object (key: value), and we want to get values out of them and move them into the array. Following the same steps, you’ve got keySeq to get the keys. You do not need to modify anything else as React perfectly understands Immutable.js and its structures. That’s why you do not need to transfer them into the native JS structures.

Our articles are perfectly normalized and in the next lesson, we will extract out comments and normalize that too.

You can visit the codesandbox below to see this lesson in action.

Edit React_lesson_lesson10

The lesson code can be found in our repository.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

React Lesson 15: Checking Homework progress from Lesson 14

Today, we are going to cover homework from Lesson 14 and add comment API to load comments. ...

React Lesson 14: Redux Thunk Deep Dive

In this lesson, we will understand the internals of Redux Thunk and the use cases where we should use ...

React Lesson 13 Part 2: Asynchronous actions

In the previous article, we used Redux Thunk and learned how to structure actions for asynchronous calls. Now we will update reducer to handle them ...

No comments yet

Sign in

Forgot password?

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account


By Signing In \ Signing Up, you agree to our privacy policy