in

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.

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)
Enter fullscreen mode

Exit fullscreen mode

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 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 
Enter fullscreen mode

Exit fullscreen mode

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 
Enter fullscreen mode

Exit fullscreen mode

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.

Criteria Hooks connect
Developer Experience Incredibly Eases the Developer Experience. Hooks are really Intuitive, making them easier to read and write. A lot of additional code is required. Adds HOC (Higher Order Components), thus adding more components to the component tree (can be seen in React Dev Tools)
Stability Might lead to some (rare and avoidable edge cases) weird edge cases with useSelector, such as Stale Props and Zombie Children. For details click here connect is way more mature than these hooks and has already worked out these in the older versions of connect, leading it to be a bit more stable
Performance useSelector accepts a second argument – an equality function to determine if the state has changed connect has some advanced techniques, using merge props and other options hidden in the connect function.
TypeScript Using Hooks with TypeScript is a breeze and can be done without much hassle Using connect with TypeScript is a nightmare, often requiring you create multiple interfaces for similar, but slightly different items
Testing Testing Components with these Hooks is tad more difficult Testing the Component Props (added by connect) is quite easy

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.

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! 🙂

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





Source: https://dev.to/ruppysuppy/next-gen-way-to-connect-redux-store-to-react-component-5b57

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

A multilingual version of MS MARCO passage ranking dataset

Fully working Discord clone with the essential features with React and Redux