Why so Normalize?

simple-normalizer

When we are using redux, most of the time we found ourselves working with deep nested objects. Anyone who works with deep nested objects can understand that it is really hard to deal with it.

Should we stop working with that kind of data structure? Of course not! Most of the time we need this kind of structure, for example, you want to create a tree component while retrieving object from redux store. To be able to create a tree component you will need a deep nested object. Imagine that you retrieve this object from your redux store and when you want to make changes to it, you should always be sure that you are not mutating the object while changing it. When you mutate it, you will see that sometimes your components will not re-render properly and behaviors of your components will be weird. To aviod that, there are couple of ways.

Let’s say that, you want to make a change on your data and want to make sure that you are not mutating it. You should clone it! Working with one level objects are easy. You can shallow copy them and continue working with your copied data. But if you have a big deep nested object, it is not easy as it seems. You need to deep clone it to make sure that all nested objects are cloned.

Those ones knows that deep cloning most of the time is not cheap. You can have performance problems with it. For example, you have a tree component and when you expand one of the levels of your tree, you should find the part that you want to change and clone object and make your change on it, then set it to your store object. Can you imagine doing this every single time while expanding the tree?

Normalizing will rescue you!

Normalizing will turn your object into one level object. So, each object that have nested child, will have a reference to their child instead of having them nested. By using this technique, reaching the deeply nested object will be so much easier for us. Also, it is not required to deep clone the object anymore beacuse all the object are not deeply nested, they are all in one level. Redux is happy and we are happy anymore.

To be able to normalize your deep nested object, you need to recursively go through the object and find all relations between objects.

Related posts:

When it comes to creating or redesigning a website, there are infinite ways to customize it to make it your own. With all those options, it can get overwhelming trying to decide which option looks…