Accessing The Redux Store With Hooks

Welcome back reader to another blog where I try to explain a technical topic using simple examples or perhaps demonstrate how to use a new tool to make you more productive as a developer. This blog will focus on the latter, specifically on how you can use Hooks to gain access to the Redux store.

Heads up, I am writing this blog with the assumption that you already have some basic knowledge of what Redux and Hooks are. In case you are not familiar with Redux please click here. The link will take you to its official site, which does a good job explaining what it is. In the case of Hooks click here.

Hooks have been taking the React developer community by storm in the past year, specially since they officially became part of the React library with version 16.8. I have attended several React meetups in the city where I currently reside and spoke with other developers and they rave about how easy and intuitive Hooks are to implement.

The popularity of Hooks has resulted in other libraries implementing their own hooks. Such is the case with the react-redux library. The react-redux library is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data. Recently the maintainers of the react-redux library added a set of hook APIs as an alternative to the existing connect() Higher Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in connect().

Just as a refresher the image below represents a React component subscribing to the Redux store using connect().

useSelector()

The useSelector() hook is one of the hooks that was recently added to the react-redux library. The useSelector() hook allows you to extract data from the Redux store. The useSelector() hook expects a selector function as its first argument. It is very important that the function you pass as the first argument to the useSelector() hook is a pure function. This is due to the fact that this function could be executed several times.

The selector is approximately equivalent to the mapStateToProps argument that you pass to connect. The selector will be called with the entire Redux store state as its only argument. The selector will be run whenever the function component renders. useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.

You may call useSelector() multiple times within a single function component. Each call to useSelector() creates an individual subscription to the Redux store. Because of the React update batching behavior used in react-redux version 7, a dispatched action that causes multiple useSelector()s in the same component to return new values should only result in a single re-render.

Below is an image of the component I previously showed using connect(), but this time using useSelector().

At first glance you can clearly see that using the useSelector() hook results in fewer lines of code. It also makes your component less robust, more readable and intuitive. If you already have experience using React Hooks this code will certainly look extremely familiar and perhaps you will prefer this approach over the previous one.

Thanks for reading this blog and hopefully you begin to implement the useSelector() hook in current and future projects.

In case you want to implement useSelector() in past projects make sure you have react-redux v7.1.0 or higher.