1 Overview

Redux is super popular and the de-facto standard state management library out there. In this tutorial, we will look at the purpose of so called selectors and demonstrate why it’s good practice to use them all the time.

2 Selectors in Redux

2.1. The issue with connecting components to state directly

Let’s first have a look at potential issues we might run into when connecting our components to our state directly. Click on the image to see it in high resolution.

Suppose you have multiple component that are directly connected to the Redux store. Now suppose, we change our mind and rename the lastName property in api to surname. In this case we have to touch all the components that are connected to this particular part of the state.

The dashed lines symbolically show the broken connections we must fix manually. Now suppose we don’t have three components, but rather a few dozens that are connected to this particular part of the state. We would have to fix all the connections manually. This is where selectors kick in.

2.2. Introducing selectors

Now just suppose, we add a middleman between our components and our state. This middleman will just be a function that accesses our state directly. This is called a selector .

Again, let’s imagine we rename lastName to surname. What happens then?

Well, the only thing that is broken is the functionality that accesses the state directly. In this case this is just the getLastName function aka our selector . By just letting selectors access our state directly, we reduce the coupling in our application significantly. Right now, the only thing that does not work is the selector because we changed the way our global state is organised. Therefore, changing and refactoring state just boils down to adapting a few selectors and reducers. There’s no need to touch all the components that are using a particular part of the state. This is pretty nice.

Dan Abramov, the creator of Redux , recommends to colocate selectors with the respective reducers. And that also makes a lot of sense. If you change your reducer, you just change your selectors as well and you’re good.

You should always strive for using selectors in your Redux application because they make it more maintainable and extendable. You don’t wanna spend much time refactoring your mapStateToProps functions after all.

2.3. Introducing Redux-reselect

Selectors themselves are nice, but we can take this approach even further. There’s a nice package called Reselect that allows you to do performance optimisation with the Redux state. Reselect is handy when we compute derived data which we pretty much always do somehow.

Suppose we save a property called firstName and lastName in our global state. In our component, we might want to display the users full name. So instead of pulling firstName and lastName into our component with the connect helper, we can just create a selector. This selector will just join firstName and lastName with a space in between and will return the full name .

With the help of Reselect, we can even cache the result. When the state is updated, our components perform a re-render. Let’s suppose some other property in our state was updated, e.g. birthday, but not firstName and lastName . Therefore, the value of fullName will still be the same as before the state update. The only thing that’s changed is birthday .

When the components re-render, they will call the selector and expect to be returned the fullName . Since nothing has changed, we can just fish the value out of a cache and return it. Then, there’s no need to perform additional work. fullName is only supposed to be recalculated if firstName or lastName or both were changed. The nice thing is that Reselect will take care of that for us.

Reselect only recalculates the value of the selector if the part of the state that the selector is working with was updated.

You probably already noticed that is approach is efficient as hell 🤓.

Reselect is one of the ways to give your application a huge performance boost and makes your codebase more extendable and maintainable.

I definitely recommend using it.

3 Redux reselect demo

3.1. Adding Reselect

Let me show you a quick code example that leverages selectors . First, we need to add Reselect to our project

View the code on Gist.

3.2. Basic Demo

For simplicity, let’s assume we have one reducer which is located in reducers/index.js

View the code on Gist.

Note that the actions we handle in our reducer are sort of artificial. In general, you should not create setter-like actions in Redux, but your actions should rather describe what happened. I just chose this simple example because it is easy to understand.

3.3. Composing selectors

You can also compose selectors like so.

View the code on Gist.

4 Wrap Up

There are a lot more things to discover with Reselect .

We barely scratched the surface. But now you should have understood what selectors are and what they are for.

Please have a look at the Reselect package on Github if you want to cover more advanced use cases.

As always, thanks for reading.

Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.

If you are interested in more high-quality production-ready content, please enter your email below.