Redux is one of the widely used State Management Solutions in React Applications. Even though it has several upsides, one major pain while working with Redux is the huge amount of boilerplate code you need to write to get it set up.

Adding to the pain is having to use connect function to map the state and dispatch to the React Component Props. This article will show you how to use data from the Redux Store in a better way using Hooks.

Old implementation

The old way implementation of connecting Redux Store to React Applications used connect from react-redux to add the selected parts of the store as component props:

const mapStateToProps = (state) => ({    // select the parts of the state required, for example:    // counter: state.counter.count})const mapDispatchToProps = (dispatch) => ({    // create the required functions by dispatching actions, for example:    // increment: () => dispatch(actions.increment())})export default connect(mapStateToProps, mapDispatchToProps)(Component)

As you can see, that's a lot of code just to get the necessary data and functions. Let's now take a look at a more elegant solution.

Getting Redux Store Data

Getting Redux Store Data has been simplified several folds with the introduction of useSelector Hook. You can now use the hook to directly get the store data inside the React Component.

import { useSelector } from 'react-redux'const Component = () => {    const counter = useSelector((state) => state.counter.count)    // ...}export default Component 

Dispatching Actions

Just like useSelector hook, there is a hook for dispatch too. useDispatch gives you access to the Redux Dispatch function inside the React Component, allowing you to dispatch actions from anywhere inside the Component.

import { useDispatch } from 'react-redux'const Component = () => {    const dispatch = useDispatch()    // For Example:    // const increment = () => dispatch(actions.increment())    // ...}export default Component 

Comparison with connect

Hooks is obviously the future of React with React urging developers to use functional components over class components, but its important to compare the two because as per the use case, one approach might fair much better than the other.

As you can see both methods have their merits and demerits. It is better to use the method that works better in your use case

NOTE: You still need to set up the Redux boilerplate the get the hooks working with React to give you access to the store using the Hooks. This method only reduces the extra code for the connection logic.

Wrapping up

In this article, we went over an alternate approach to connecting Redux Store to React Components. We also discussed the merits and demerits of this new approach and how it can help developers. Hope this helped you in your React Development Journey! :)

Thanks for reading

Want to work together? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for weekly new tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

1. I am a beginner, how should I learn Front-End Web Dev?
   Look into the following articles:

   1. Front End Development Roadmap
   2. Front End Project Ideas

2. Would you mentor me?
   
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

3. Would you like to collaborate on our site?
   
   As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

• LinkedIn
• Portfolio
• Upwork
• GitHub
• Instagram