React Redux With Hooks
When it comes to state management one of the most popular one you would see is Redux. The reasoning for this is because, it does a really good job. Redux gives all of your components the ability to share information only if you allow it. This makes for a lot more freedom for a developer. Also, one of the great things about Redux is that it is scalable. If you application starts to grow, you will easily be able to increase the functionality of the application without having to refactor all of your components. One con I can think of is that there is a lot overhead that comes with setting up Redux. But, if you are planning on building a larger scale application, Redux is highly recommended (by me.) Since 2019 Redux has launched an update that gives functional components hooks to use, instead of using connect.
This is a big deal for developers for multiple reasons.
- For starters Hooks are simply easier to work with. You also wont need to do ugly coding like so:
2. Your components start to look a lot more like JavaScript rather than a conglomerate of different add-ons and plug-ins. Which makes for much easier to read code.
3. Hooks don’t create another element in the DOM like Higher Order Components (HOC’s) do like connect.
This list can go on for a while so here’s a link to take a deeper dive on what hooks can offer.
To start off, the two main tools you’ll need to make your application ditch connect, and use Hooks is useSelector ( this will replace mapStateToProps ) and useDispatch ( this will replace mapDispatchToProps. ) You’ll want to import them just as you would ‘connect’:
useSelector is going to be the new way you will manage state within your functional component. I have an example below showing how you would do this with mapStateToProps, and then the useSelector way:
As you can see the code is already looking much more compact. Though what if you wanted to have multiple parts of state within the same component? No worries you can use useSelector as many times as you’d like. Also, useSelector takes in a secondary argument. That argument is what you’ll be using as the comparison between the two states. If the two states are different then the component will re-render, otherwise nothing will happen. Redux gives you an option of importing a shallowEqual like so:
Be aware that the shallowEqual isn’t the only way to compare between the two states. You can use your own custom logic to figure out whether the two states are the same or wether the component should re-render. For example, In one of my applications I was able to update state by adding items to my cart, but when it came to removing items, the shallowEqual didn’t recognize a difference within the states. Therefore, the component didn’t re-render. My solution to solving this problem looks like this:
It’s one of those, “ It works but I don’t know why” type of situation. So if you find the shallowEqual not working properly you will have to play around with your comparisons to figure out how to properly make the state update. If you would like more information please reference this.
Once you have your state set up with your functional component, all you need to do is implement useDispatch. UseDispatch is incredibly easy to wrap you head around. You’ll want to import it from ‘react-redux’ and just assign it to a variable like so:
It’s that easy, when it comes to dispatching actions. You don’t need to add in all of the overhead that you used to with mapDispatchToProps for example:
Quick note, in the parameters for App I don’t pass in props, I de-structure the props. This makes for cleaner DRY code, I highly recommend you incorporate this style of coding in your own work.
Your component will look like this instead:
There is a glaring difference between how clean the two look. I would like to also point out that you no longer need to de-structure your props within your components parameters.
Now when it comes to dispatching the actions themselves it quite simple as well. Here’s an example of the old way of doing it:
The new way:
It’s as simple as that. Every time you dispatch an action useSelector will make a comparison between its states, and if there is a change then it will update the component.
All in all, that is the extent of my knowledge about React Redux with hooks. There is plenty more to learn for the both of us. If you’d like to take a deeper dive I’d recommend checking out the React Redux docs. Thank you for reading!
