DEV Community

Cover image for Next-Gen Way to Connect Redux Store to React Component

Next-Gen Way to Connect Redux Store to React Component

Tapajyoti Bose on September 19, 2021

Redux is one of the widely used State Management Solutions in React Applications. Even though it has several upsides, one major pain while working ...
Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

How about redux-toolkit?

Collapse
 
volubleogre664 profile image
volubleogre664

I was here to mention Redux-toolkit
It further simplifies everything and the boilerplate code you write is very small and simple
I actually have a custom hook that does exactly what's in this article but in a much more simple way and it is using redux-toolkit

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

It also greatly improves async data fetching when you aren't using something like react-query. It provides useSelect and useDispatch as hooks, making things very easy, maybe the async set up could be improved, but after you understand its mechanics it makes sense. Start by their guides on the official website, I guarantee you will like it 😁

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Could you please share it? It would help out the readers a lot

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Yes, a lot of people had been using it lately. I haven't used it yet, so I don't have enough experience to comment on it

Collapse
 
krtirtho profile image
Kingkor Roy Tirtho

So the next-gen react-redux is actually zustand? Didn't expect they'd copy the API of it but that's the fun part of open-source. But at least it'd take fewer boilerplates

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Its quite similar, yet different from zustand.

Ps: I don't know much about zustand, I looked through how it's used and drawing conclusion from that

Collapse
 
krtirtho profile image
Kingkor Roy Tirtho

Of course, they don't work similarly
zustand is much more flexible, simple & atomic. FYI, it doesn't have the zombie-child/stale-props issue too
It's a great state manager for simplicity in your codebase

Thread Thread
 
ruppysuppy profile image
Tapajyoti Bose

Great! I'll definitely look into it

Collapse
 
phryneas profile image
Lenz Weber • Edited

This is pretty much as old as Zustand - it came out 2019, a few months after React hooks came out (after some fiddling they did to make sure that the api was good)

Collapse
 
victorhqc profile image
Victor Quiroz

Was the performance difference actually tested? I don't think it has a signifficant difference using hooks or connect(). Of course, I can be wrong, and that's why having some results that prove this claim would be nice to see.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

I haven't tested it. I read some that the performance for both the approaches are at par with each other, but you can optimize the performance of connect a bit more than the optimization for the hooks

Collapse
 
boberbober profile image
Gregory Bober

Just use Recoil. I was a long time Redux user and then tried Recoil and I'm never going back. Recoil feels like it's part of React. Redux always needed so much unnecessary adapters, selectors, etc.. Recoil is fantastic.

Collapse
 
wobsoriano profile image
Robert

The recommended way is to use RTK. It's even in the docs.

Collapse
 
tronin profile image
Dan

If you would like to have long term support for your React application use pure redux with redux-saga for managing side effects.