React Redux Tutorials - 21 - useDispatch Hook

📱 Follow Codevolution

useDispatch Hook in React Redux

[endthefed]

hooks are, IMHO, a better option than using
from a top stackOverflow answer to "Should I use useselector/useDispatch instead of mapStateToProps":

There is nothing you can do with that you can't do with the useSelector and useDispatch hooks as well.

With that said, there are a couple of differences between the two methods that are worth considering:

Decoupling: with mapStateToProps, container logic (the way store data is injected into the component) is separate from the view logic (component rendering). useSelector represents a new and different way of thinking about connected components, arguing that the decoupling is more important between components and that components are self contained. Which is better? Verdict: no clear winner. source

DX (Developer experience): using the connect function usually means there should be another additional container component for each connected component, where using the useSelector and useDispatch hooks is quite straightforward. Verdict: hooks have better DX.

"Stale props" and "Zombie child": there are some weird edge cases with useSelector, if it depends on props, where useSelector can run before the newest updated props come in. These are mostly rare and avoidable edge cases, but they had been already worked out in the older connect version. verdict: connect is slightly more stable than hooks. source

Performance optimizations: both support performance optimizations in different ways: connect has some advanced techniques, using merge props and other options hidden in the connect function. useSelector accepts a second argument - an equality function to determine if the state has changed. verdict: both are great for performance in advanced situations.

Types: using typescript with connect is a nightmare. I remember myself feverishly writing three props interfaces for each connected component (OwnProps, StateProps, DispatchProps). Redux hooks support types in a rather straightforward way. verdict: types are significantly easier to work with using hooks.

The future of React: Hooks are the future of react. This may seam like an odd argument, but change to the ecosystem is right around the corner with "Concurrent mode" and "Server components". While class components will still be supported in future React versions, new features may rely solely on hooks. This change will of course also affect third party libraries in the eco system, such as React-Redux. verdict: hooks are more future proof.

TL;DR - Final verdict: each method has its merits. connect is more mature, has less potential for weird bugs and edge cases, and has better separation of concerns. Hooks are easier to read and write, as they are collocated near the place where they are used (all in one self contained component). Also, they are easier to use with TypeScript. Finally, they will easily be upgradable for future react versions.

[abobakerhilal]

Your explanation is very distinctive, you give information wonderfully, I hope to build an electronic store site Bal react, or if you do not mind give me some observations, for example, I use the hookes or not and how to divide the project, especially since it is an integrated shop and whether I use redux or not, also give me how to divide the project inside The react

[senaitmeles]

Can you please make a video on Angular and maps, places API? Thank you for all the videos in Angular.

[sangtonsing]

It works on decrement(when buying cake the number of cake decrease) but when trying to increment it malfunctions. Suppose numOfCakes-10 and when we buy it gives us 9 but when incrementing the number instead of giving 11 it gives us 101, 1011, 10111, 101111... Why? is it an intention bug?

[nikhiltiwari]

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

I got this error on using useDispatch () hook. Please help to resolve it

[paolo-]

How do you stop the propagation of event handlers for each component sharing the same state? i tried the event.stopPropagation() but it doesn't work.

[jogre]

awesome, u have some tutorials about redux persist login and logout?

[patrickconrad]

This is great but I notice that useSelector captures a state at that moment. so I console logged the state before the function then after and it was the same. I used the router dom to push to a different page and on that page ran a useEffect hook and called a variable I assigned to a useSelector hook for the same variable as before, and now it changes. When using the mapStateToProps I don't have this issue.

[isbeb]

hmm not clear on how useDispatch is accessing the reducer... we only import the action, correct?

[ayushilahariya]

can we call usedispatch in a simple function if not then how to achive this i have this requirement in my project i need to call the redux action from simple function

[brunokotesky]

using useSelector and useDispatch, i can't pass these 'props' to my wrapper component, like my stateToProps...?

[kart]

why at 1:10, both the numOfCakes count decreses even though we didn't click the bottom button?

[darshangoheldz]

What if we refresh the page? Will it still show updated cake counts?

[luisgazcon]

That looks great with nord theme and firacode I have the same config

[STUPIDYOUTUBE_HIDINGMSGS]

Do you have any recommendation for Redux alternative? This is way to complex for simple implementation of state and hooks. And the future of Redux is unknown, probably will be gone in a couple of years and legacy systems using it will be a nightmare to maintain for incoming developers!