DEV Community

Cover image for A Complete Guide to Redux

A Complete Guide to Redux

Anuradha Aggarwal on May 30, 2021

Hello coders!! Today we will discuss some concepts you need to know to build real complex applications with React and Redux. In this article we'll...
Read full post
Collapse
 
domiii profile image
Domi •

Hey, great introduction for beginners.
Since you are calling this a complete guide (not a "first look"), you might want to consider the following naggy points (not sure if appreciated or not):

  1. In React hook land, mapXToProps is superceded by useSelector and useDispatch hooks
  2. Don't use useState, unless you have a very good reason to. You want to keep your state management cleanly separated from your components. That is why people (claim to) use Redux in the first place. (Although this inconsistency is prevailant in many production code bases.)
  3. Gif nor article feature "Redux Dev Tools". It's definitely one of the first things you want to use to visualize and analyze your state-action diagram.
  4. A complete guide should contain intermediate and advanced topics, not just the basics; else I'd consider it clickbait. But of course, all of this is just opinion. Maybe you might want to add "Part 1" to the title?
  5. Intermediate and advanced topics should probably largely focus on how to avoid the anti patterns that redux was developed to help you avoid, including keeping things separate, modular and in "flux". Here is some possible inspiration: redux.js.org/style-guide/style-guide

Good luck! Keep on hacking!

Collapse
 
strap8 profile image
Nathan Foster • • Edited

I agree with all your points expect the first. The useSelector hook does not give you memoization out of the box like the connect API does. The useSelector uses strict equality while the connect API checks for reference changes between the previous and next props. To achieve the same functionality with the useSelector hook, you can wrap your component with the React.memo HOC.

Collapse
 
anuradha9712 profile image
Anuradha Aggarwal •

@domiii Thank you for your feedback. I'll surely look into it!!

Collapse
 
it718 profile image
IT Solutionist, Specialist •

Awesome, thank you for your posting.

Collapse
 
anuradha9712 profile image
Anuradha Aggarwal •

I'm glad you find it useful!!

Collapse
 
sefrem profile image
sefrem •

Nowadays Redux rarely if ever used without Redux Toolkit or Saga, so i'd say one would not call a guide complete without at least touching those subject.
Apart from that, great job.

Collapse
 
dev_emmy profile image
nshimiye_emmy •

this is awesome, keep it up...

Collapse
 
anuradha9712 profile image
Anuradha Aggarwal •

Thank you!!

Collapse
 
ganeshshetty195 profile image
Ganesh Shetty •

Nice one Anuradha, Would have been better if you could explain why exactly middleware we need
Thank You