Next-Gen Way to Connect Redux Store to React Component
Tags: react, redux, javascript, typescript
Published: 2021-09-19 05:02:28

**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**:

```jsx
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**.

```jsx
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**.

```jsx
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**.

| 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](https://react-redux.js.org/api/hooks#stale-props-and-zombie-children) | `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.

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

![Thumbs Up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ua31bf0saag0ww9u7q4.gif)

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Want to work together? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for weekly new tidbits on [Dev](https://dev.to/ruppysuppy)

**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](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

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](https://www.linkedin.com/in/tapajyoti-bose/)
-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)
-   [GitHub](https://github.com/ruppysuppy)
-   [Instagram](https://www.instagram.com/tapajyotib/)