A Simple Improvement For Your Redux Store

At OpsGenie, Redux was our savior in our React application, Badges. We think it is awesome with React but requires a neat structured store. In this post, I want to show you a simple way for improving the shape of your Redux Store. This might not be the “best” way to do it but I believe it would open up some doors and take you a step forward.

A Redux store is not a class, it is just an object with some methods in it. The big deal is that it holds the whole state tree of your app and has a direct impact on performance. Thus, you should ask the question “How should I shape my Redux store?”.

You should consider:

• Do you need fast access to individual items?
• Are you going to iterate over the store data like lists and arrays frequently?

Most common approach is shaping the store state as an array of objects. This approach is easy and simple to use with the option to store data in particular order. The bad thing is that you can’t access an item without iterating.

Let’s try to enhance this. You probably already know what an associative array is. An associative array is simply a set of key-value pairs and every JavaScript object is an associative array.

We can use this concept in our store, IDs of the items as keys and the items themselves as the values:

Now we don’t need to iterate anymore while accessing an item with its ID. We can access Frontend Master badge just by badges['1442-3337'], even if it is not that easy to acquire a Frontend Master badge in real life ☺.

Note that we can still access the IDs of badges while iterating over Object.values(badges) since we kept IDs inside the values.

We got the idea of how our store state should look like, now, how can we achieve this? An easy way is to design your backend services with this structure in mind. If you fetch your data in this format, it won’t be hard to achieve a nicely shaped store. Doing so, we would have simple reducers.

Cases in the badges reducer would look something like:

If we used an array of objects instead, cases would look like:

As it can be seen, if we didn’t shape the data in store cleverly, we would have iterations in our reducers. We would also have iterations while accessing individual items in the store. This is bad for performance, especially if you have plenty of data.

Complex data in store state means that the corresponding reducer logic will also be complex.

Ordering your data

What if you need to have particularly ordered data? You had the option to simply order your data when using an array. But with an associative array, there is no guarantee for the order of iterating over the properties, so there is nothing like a sort for them. What if you need such a thing? Do you have to convert your object properties into an array that guarantees order?

Luckily, you don’t have to do that. A simple trick is to have an additional array of IDs which indicates ordering. Instead of converting your associative array into a “real” array, you could use this array for any ordering purposes. Note that if you need such a thing, you would also need to update “IDs array” in the corresponding reducer.

The Big Picture

Until now, we focused on a single piece of data, badges. We shaped it as key-value pairs and put it into our store state. You would also have other pieces of data like users and groups. If you shape each of these similarly, your Redux store would be similar to a database. This is strongly related to Normalizing State Shape section in Redux docs, I advise you to take a look at it.

Here is a sneak peek at Redux docs, the basic concepts of normalizing data:

• Each type of data gets its own “table” in the state.
• Each “data table” should store the individual items in an object, with the IDs of the items as keys and the items themselves as the values.
• Any references to individual items should be done by storing the item’s ID.
• Arrays of IDs should be used to indicate ordering.

This is not much different from what we were trying to do. If you are interested in Normalizing State Shape, you should check out normalizr, a small but powerful utility.

If you intend to have a nicely shaped store, pay attention to the format of the data you send to the frontend (i.e. it is a lot easier to produce the associative array if the data is shaped as key-value pairs). Otherwise, you would need some additional logic in reducers. If you are having a hard time formatting your data, take a look at GraphQL. I bet you would like it.