Selectors in Redux
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
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
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
lastName in our global state. In our component, we might want to display the users full name. So instead of pulling
lastName into our component with the
connect helper, we can just create a selector. This selector will just join
lastName with a space in between and will return the
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
lastName. Therefore, the value of
fullName will still be the same as before the state update. The only thing that’s changed is
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
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
3.2. Basic Demo
For simplicity, let’s assume we have one reducer which is located in reducers/index.js
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.
4 Wrap Up
There are a lot more things to discover with
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.Follow @productioncoder
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.