Redux Crash Course with Hooks 🎣
Tags: redux, react, javascript, webdev
Published: 2019-10-02 12:01:45

*This was originally posted as a twitter thread: [https://twitter.com/chrisachard/status/1179015849459507200](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](https://thepracticaldev.s3.amazonaws.com/i/q0v61a2us4iixkpoyno9.png)

# 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](https://thepracticaldev.s3.amazonaws.com/i/sb0chu53pbi5nz7zur07.png)

# 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](https://thepracticaldev.s3.amazonaws.com/i/i1z8b0ma7b8zjd34axk2.png)


# 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](https://thepracticaldev.s3.amazonaws.com/i/2z4der2vvau8de8vhre0.png)

# 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](https://thepracticaldev.s3.amazonaws.com/i/sk1hqh1qknshm1pv0e4l.png)

# 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](https://thepracticaldev.s3.amazonaws.com/i/k88s5pljjbm9208y8nml.png)

# 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](https://thepracticaldev.s3.amazonaws.com/i/ihgvc66ylih8pguennd8.png)
  
# 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](https://thepracticaldev.s3.amazonaws.com/i/g2zfo5gyj8bkbfbxdofz.png)


# 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](https://thepracticaldev.s3.amazonaws.com/i/bze9o0yiiqite5fkylyn.png)


# 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](https://codesandbox.io/s/redux-count-hrdtd?fontsize=14)



&nbsp;

**Like this crash course?**

Find more on twitter: [@chrisachard](https://twitter.com/chrisachard)
Or join my newsletter: [https://chrisachard.com/newsletter/](https://chrisachard.com/newsletter/)

Thanks for reading!