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. 🙂🙇‍♀️

--

--

--

Just another guy who wants to make world a better place!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[Rxjs] Rxjs store for angular (rx-ng-store)1

What is a PWA — And is it the future of apps?

Creating Android/iOS App with Cordova and Angular

JavaScript The Tricky Parts: Part-2

Introduce To JavaScript

The difference between Flux and Redux

Migrating from nextjs 10 to 11 @smallcase

Use object destructuring to write cleaner code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aashish Manandhar

Aashish Manandhar

Just another guy who wants to make world a better place!

More from Medium

Create-react-app with a previous version of React

How & when to use redux in react projects?

How to upgrading React Router from V5 to V6 in our projects

What is React and what are its advantages?