Redux Hooks!

So it has been a hot reloading minute since React released their hooks API and I think it is fair to say that the majority of the community have played around with the new API. If you haven’t already, I definitely recommend it as they are great.

With Hooks being all the rage, a lot of popular libraries have jumped on board and released their own hooks as alternatives to their current methods. Some noteworthy examples include mobX, react-spring, formik, final-form just to name a few.

Redux, probably the most popular state management library for React, is no exception. Having recently released their new Hook’s API in v7.1.0 as an alternative to the connect() Higher Order Component(HOC) I was eager to have a play and fish around at what the drawbacks and benefits may be!

Basically, these new API’s allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in connect()

These new hooks are:

useSelector useDispatch useStore

In this article we will be building:

A shopping cart (because it has never been done before…) using both the traditional connect HOC and the new Redux hooks.

HOC and the new Redux hooks. A summary of the shopping cart with Redux Hooks and the Reselect Library.

The purpose of this article is to show you:

The traditional way React Components connect to the redux store. How we can connect to the redux store using the new Redux hooks. The benefits and drawbacks of using these hooks.

The repository can be found here

https://github.com/terencejeong/redux-hooks-api-play

Please note, this article is not here to say which approach is better, but to highlight the differences between both and to help you get a better mental model of how these new hooks will work.

Project Setup

I set up the project using create-react-app with the typescript flag enabled. If you don’t want to code in typescript you are more than welcome to ignore the flag.

yarn create react-app my-store --typescript

I then added the following libraries as they are the key ones we will be focusing on.

yarn i redux reselect

File Structure

The file structure will look something like this

Setting up Redux Store and Product Reducers

Now let’s get on creating our Redux store and Product Reducers. I’ll assume readers will have an understanding of how Redux work so I won’t go into too much detail.

Please don’t get caught up in the details here, I just want you to know what our store will look like and the data our components are consuming.

In the store folder we will add an index.ts file.

In the reducer folder we will add 4 files.

index.ts products.ts productsOld.ts storeHours.ts

The products.ts file will be the reducer for our Hooks ProductList component and the productsOld.ts file will be the reducer for our connect HOC ProductList component.

index.ts

products.ts

productsOld.ts

Show me the Redux Hooks!!

Almost there! We first need to create our ParentContainer.tsx file which will render both the ProductListHooks.tsx file and ProductListContainer.tsx file.

Our ParentContainer.tsx file will just simply render the ProductList Hooks and ProductListContainer as well as the open and close status.

The site currently looks something like this.

Some real solid UX/UI work here

Now the ProductListContainer.tsx will connect to the Redux Store using the connect HOC. As you can see from the snippet below there is nothing complicated going on here. We are simply giving the component state from the redux store and access to dispatch. This component will take the products from the store, map over them and pass it to the ProductItem.tsx component which will then render the data.

ProductListContainer.tsx

Redux Hooks!!

Now let’s show what the above component would look like if we used the new Redux hooks.

Ooo that is a little different isn’t it! In the file above we can see that we have two new hooks called useSelector and useDispatch .

But before I talk about them, you can see that the component is awfully similar the the ProductListContainer.tsx component before. It just takes the products from the store, maps over them and pass it to the ProductItem.tsx along with dispatch .

Now the juicy stuff, let’s break down the two new hooks shall we.

useSelector

This hook allows us to extract data from the Redux store state, using a selector function. The selector function will be called with the entire Redux store state as its’ only argument and has to return the relevant part of the state used by the component.

In the code snippet above we can see that it is returning the products array from the store.

Now, although it does the same job as mapStateToProps there are some key differences we must consider.

The selector can return any value as a result, not just an object. When an action is dispatched, the useSelector hook will do a reference check and compare the previous value and the current result value. If they are different, the component will be forced to re-render. If they are the same the component will not re-render.

Now, I really want to discuss point 2 because this is where the biggest difference between connect and useSelector is. In Redux, connect uses shallow equality checks on the result of mapState calls to determine if re-rendering is needed. However, useSelector uses a strict === reference and this has several implications on how we should implement useSelector .

But what does that actually mean?!

Well let’s take a closer look at the ParentContainer.tsx file that is responsible for rendering the ProductListHooks and ProductListContainer . You can see that ParentContainer also displays whether the store is open or closed by dispatching an action to the store.

Using the awesome React Profiler in the devtools we can see what gets re-rendered if we click on the button a bunch of times.