Connect to useDispatch and useSelector in Redux

If you’ve been using redux for years you’ve been familiar with the connect() Higher Order Component that jumbles up the flow of props in your code and makes you constantly scroll the page in order to understand whether the props in the component are actually just real props or something that we added in later from the store. It is a huge problem with class based react components where there is no other option but to embrace this chaos.
I always felt the class based components addition of unnecessary complexity and bloated code with lots of things you’d need to remember to get stuff working and the move to function components by React felt like a huge relief.
This article is meant for those people who are moving away from class based components to function components so viewer discretion is advised. 💁

Here in the above example I’ve written a function component with connect syntax to connect to the redux store. With function components you can still use this syntax but to me it’s like getting a new car but trying to stick to the same manual driving mode even though your car supports automatic because you’re comfortable with the former one.

For using mapStateToProps to subscribe to redux store changes or/and mapDispatchToProps to dispatch redux actions, it’s well known that you’d need to wrap the component with a connect() HOC passing them as arguments. The problem with mapStateToProps and mapDispatchToProps functions and the connect() HOC are that they abstract relevant logic from the main function and magically append the resulting output (store data and dispatch functions) to the props. Imagine trying to look for a flow of code in 10 components with each component connected to the store. You’d have to look at mapStateToProps and mapDispatchToProps for each component first to verify whether the props are actually just normal props or something redux store related.

Here I’ve rewritten the Events component replacing connect syntax with hooks. I’ve introduced two new hooks, useSelector and useDispatch.
Here useDispatch as the name suggests is the replacement for mapDispatchToProps and useSelector is the replacement for mapConnectToProps.
I think it wouldn’t be hard to grasp the usage of these hooks as it’s self explanatory in the above example. Like useState hook you can use useSelector hook multiple times to set data from store to multiple variables.

Some advantages of this approach:

• It looks neat and clean and the best part is that it doesn’t break the flow of code and you can read the entire component in a single flow without the need to scroll frantically.
• And the props aren’t diluted with the store components, so props are actual props.
• The need to define another set of functions to dispatch store actions is removed with this approach as you can just use the dispatch variable to dispatch the imported actions where it’s required.

The only caveat is that you’d need to be using a version of React Redux greater than v7.1.0. Hoping this was of help of some sorts. 🙂🙇‍♀️