loading...
Cover image for Redux Crash Course with Hooks ๐ŸŽฃ

Redux Crash Course with Hooks ๐ŸŽฃ

chrisachard profile image Chris Achard Originally published at twitter.com ใƒป3 min read

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1179015849459507200

Does Redux have you confused?

It can be simpler with the new Redux hooks.

๐Ÿ”ฅHere's a crash course into Redux, and how you can use it with React function components:

1.

Redux gives you a central place to put your state (data) for JavaScript apps

It's most often used with React (via react-redux)

This lets you access or change your state from ANY component in your tree

Redux store

2.

Your state lives in a central Redux store

That store is created with a function called a reducer

A reducer takes in a state and an action,
and returns the same or a NEW state

Central store reducer

3.

The store is given to your app using the Provider from react-redux

Use the provider to wrap your entire app, so that any component in your app can access the store

Redux Provider

4.

To get data out of the store, use the useSelector hook from react-redux

selector is just a fancy word for: "function that gets data from the store"

useSelector takes a callback, which gets the entire redux state, and you just pick out what you need for that component

useSelector

5.

Actions are plain JavaScript objects

All actions should have a 'type' key

They may also have additional keys (parameters)

Actions have a type key

6.

Actions are not "called", but are "dispatched" to the reducers

The action type is what tells the reducer what to do (return a new state or the old one)

Actions are dispatched

7.

To change data in the store, first write your reducer:

Reducers are often written with switch/case statements, but don't have to be

They just have to take in an action and a state, and return a new state

Reducer with switch case

8.

It's important that reducers return a NEW state object (and not mutate the old one) so that your components will re-render when something changes

Don't set state values in reducers - only ever return a new state object with changed values

Do not mutate state

9.

To dispatch an action, use the useDispatch hook from react-redux

call useDispatch with an action object,

which will run through the reducers,

and will potentially change the state

useDispatch

10.

All connected components (that call useSelector) will automatically get the new state

This is treated like props or state changing - useSelector will automatically detect changes and React will re-render the component

๐ŸŽ‰ TADA!

That's the basics!

Redux can be used in much more complex ways, but the core is always:

  1. dispatch an action to the store
  2. which may or may not change the state via reducers
  3. access that state with a selector
  4. and changes will automatically re-render your app

๐Ÿ’ฏ

Code example:

View and play around with the code used in this course on codesandbox:

https://codesandbox.io/s/redux-count-hrdtd?fontsize=14

ย 

Like this crash course?

Find more on twitter: @chrisachard
Or join my newsletter: https://chrisachard.com/newsletter/

Thanks for reading!

Posted on by:

chrisachard profile

Chris Achard

@chrisachard

I'm trying to teach everything I know at chrisachard.com Instructor at egghead.io Mostly, I use JS, React, Rails, and Node

Discussion

markdown guide
 

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. ๐Ÿ˜๐Ÿ˜๐Ÿ˜

 

Glad to help! ๐Ÿ˜

 

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)

 

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!

 

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

 

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.

 

Sure thing! That'd be neat :)

 

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?

 

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 ๐Ÿ˜„

 

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

 

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.

 

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

 

Thanks! Exactly what i was looking for :D

 

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

 
 

I found it very useful and well written, thanks

 

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

 

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!

 

Useful.. Thanks๐Ÿ™๐Ÿ™‡

 

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

 

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

 

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