DEV Community

Cover image for Redux Crash Course with Hooks 🎣

Redux Crash Course with Hooks 🎣

Chris Achard on October 02, 2019

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1179015849459507200 Does Redux have you confused? It can b...
Collapse
 
ashikpaul42 profile image
AshikPaul42

Thank you so much. I have been trying to learn redux for the past month and was not understanding how to implement it. This is simply perfect. This is what exactly what I was looking for.
I can't Thank you enough. You are the best. 😍😍😍

Collapse
 
chrisachard profile image
Chris Achard

Glad to help! 😁

Collapse
 
popbee profile image
Bernard Poulin

Cool intro to hooks for redux!

Little comment: It would be even nicer if the code examples were not images so I could easily copy snippets (and that would also give more SEO probably). But no worries, I still enjoyed reading this.

Bernard

(And thanks for contributing to DEV)

Collapse
 
chrisachard profile image
Chris Achard

Yeah, that’s a good point... I do include a code sandbox link at the end, but I could put one for every step - I’ll think about that for next time (or could edit this one).

Glad it was useful!

Collapse
 
chrislovescode profile image
Chris

I love the verry visual explainations with all that arrow pointer stuff :)

Thread Thread
 
chrisachard profile image
Chris Achard

Glad to hear it!

Collapse
 
jokingzhang profile image
zhangboxuan

Hey man! This article is awesome, I am currently learning Redux in React, Can I translate your article, learn, and then put it on the China Programming Forum website? Website Addr: segmentfault.com/ . And I'll keep original address in article.

Collapse
 
chrisachard profile image
Chris Achard

Sure thing! That'd be neat :)

Collapse
 
anirudhrowjee profile image
Anirudh Rowjee

Before I read this article, I was extremely confused about Redux (coming from Vuex, you can Imagine the difference) - but this article laid it all out clearly, and now I have a decent understanding of redux. Thank you so much! :D

Collapse
 
svenvarkel profile image
Sven Varkel

Thanks for good intro. I've been developing in NodeJS (and a number of other langs) for ages but React made me scratch my head. I felt old and dumb :) Now I start getting it.

BTW - what's the issue with those weird "s" characters you're using? I remember we had to write "s"-s this way at school (in Europe). How do you get these?

Collapse
 
chrisachard profile image
Chris Achard

Glad you're starting to get it!

Ah, those "s" characters are because I turned on "ligatures" in codesandbox (which I used to make those screenshots). I think they're kind of fancy looking 😄

Collapse
 
ibrahimkholil6210 profile image
Ibrahim Kholil

Hello everyone! Recently i'm working with redux. But i am not getting one thing and that is i created a store and reducers and dispatching an action and then state gets change and i am subscribed to the store with a callback which gets called on state change now in this callback i put in a render method which will re-render my UI but my question is what if i have multiple section in my UI suppose i have a Todo list and Movie List those two are different module depends on different data and if Todo list gets updated i have to re render the whole UI again cause i subscribed to store with render method and render method take the state and basically rerender the whole UI again in this case i just updated Todo list what i want is to just rerender UI part related to Todo list not Movie list. But i can not do that cause i am subscribed to store with render method and that method basically rerender the whole UI. Now how can i only rerender specific part of UI? Do i need to create two store? One for Todo one for Movie then does redux core principle works here cause their is not single source of truth where i have two store that means two state. Or am i getting it wrong? One more thing i am not using any UI library instead vanilla Javascript

Collapse
 
chrisachard profile image
Chris Achard

Are you using redux with React?

If you are, then React will respond to the data update by only re-rendering components that pull out data from the store that has changed.

If you aren't using React (it sounds like you aren't maybe, because you wrote your own callback that re-renders your UI?), then I can't help much - sorry! In that case you would need to write code to figure out which parts of the UI need to update. You shouldn't need to use two stores to do that - it's possible with just one.

Collapse
 
ibrahimkholil6210 profile image
Ibrahim Kholil

Thank you very much for your response i really appreciate it!

Collapse
 
vipulchodankar profile image
Vipul

Thanks! Exactly what i was looking for :D

Collapse
 
yaroslavoz profile image
Yaroslav

Amazing explanation! You're really the best, dude!)

Collapse
 
mirkan1 profile image
Mirkan

THank you!

Collapse
 
curious_web_addicts profile image
Curious Web Addicts

I found it very useful and well written, thanks

Collapse
 
256hz profile image
Abe Dolinger

Great writeup! Clearer and more helpful than some much longer pieces. Let me know when you do sagas!

Collapse
 
sammourad profile image
Sam Mourad

The formal redux with React "Getting started" guide was confusing so I searched on this site and found your article. Fantastic guide to get started and a very accessible explanation. Thank you!

Collapse
 
mahendrakulkarni177 profile image
Mahendra

Useful.. Thanks🙏🙇

Collapse
 
arung86 profile image
Arun Kumar G

By the by what tool you have used for adding notes to the code in those images, it looks cool to me..

Collapse
 
chrisachard profile image
Chris Achard

I take screenshots of the code and then open them in photoshop to add the arrows and notes. Kind of a lot of work! But I'm not sure if there's an easier way :)

Collapse
 
josuerodriguez98 profile image
Josué Rodríguez (He/Him)

Thanks for this! Very well explained, straight to the point and clearly written! Hooks make everything so nicer😋

Collapse
 
noumanmalik960 profile image
knowmi

Thank You Chris! You explained it well.

Collapse
 
chadsteele profile image
Chad Steele

I'd love it if you wanted to dissect my Redux one line replacement hook... useSync
dev.to/chadsteele/redux-one-liner-...

Collapse
 
ashimasingla20 profile image
Ashima Singla

Hi i am planning to write an article would like to know what tools you used for images adding arrows and code snippet. It will be like my first Article.

Collapse
 
sskanishk profile image
Kanish Malviya

Carbon