Next-Gen Way to Connect Redux Store to React Component

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! :)

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

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

Want to connect? Reach out to me on LinkedIn

Originally published at https://dev.to on September 19, 2021.