Learn redux-toolkit in 10 steps
Tags: react, javascript, redux, webdev
Published: 2020-12-15 14:23:23

<i>This was originally posted as a tweet thread: <a href="https://twitter.com/chrisachard/status/1338507383765684224">https://twitter.com/chrisachard/status/1338507383765684224</a></i>
<br />

If you're using redux today, you should be using redux-toolkit

Here's redux-toolkit in 10 steps 👇


## 1.

Create a "store" with "configureStore"

A store holds all your data and the actions that change that data

Use a "Provider" component (like context) to give the store to all your components

![Provider gives the store to any component below it in the app. configureStore can also configure middleware and enhancers](https://dev-to-uploads.s3.amazonaws.com/i/fvavkbkcjjgwk6hiks98.png)

![All your data and actions to update that data. Divided into slices. All components under the Provider have access to any data or actions in the store](https://dev-to-uploads.s3.amazonaws.com/i/rjb5tevurbj58y631mn3.png)


## 2.

Create named "slices"

A slice holds a chunk of the state, plus the functions that can update that state

No more changing 4 different files just to write one action! 🎉

![Each slice has a name. State can contain any serializable data that you want (strings, objects, arrays, etc). Reducers auto-create actions No need for 4 different files  just for 1 action!](https://dev-to-uploads.s3.amazonaws.com/i/hld6ds57v1thss1riubx.png)


## 3.

Add the slice to your store by adding the "reducer" from the slice to the "reducer" in the store

The slice ".reducer" (singular) is auto-created when you define your "reducers:" (plural) in the slice

![Specify the reducer name (same as your slice name). Add multiple slices by adding multiple keys to the object. Each slice has a "reducer" (singular) that is exported automatically](https://dev-to-uploads.s3.amazonaws.com/i/p810ceofsj5q03clltrt.png)


## 4.

Functions that update the state in your slice are "reducers"

A reducer takes the current state and the action (data) being performed, 

and updates the data in the slice's state

(redux-toolkit uses immer, so those state changes are actually non-mutating)

![Reducers are functions that take the current state and change it. This LOOKS like a mutating change but since redux-toolkit uses immer, it’s actually a non-mutating change. Functions in this reducers object are auto-exported as "actions" that can be used later](https://dev-to-uploads.s3.amazonaws.com/i/nlr7wjnz234q7sjgtthb.png)


## 5.

To get values from the store in a component, use a "selector"

A selector function is given the entire redux store and returns just the data you want

Pass your selector to the "useSelector" hook which will call it for you

![You can use useSelector in any component in the tree under a Provider component. The entire redux store. Access your named slice. Get any value from that slice. Then use that value like any other value in JSX](https://dev-to-uploads.s3.amazonaws.com/i/znjlrhdkbdgb0ct2ozzz.png)


## 6.

To change data in the store, use the "actions" that are exported from the slice

These actions are named based on your named reducers

You don't call on their own however, because they need the current state and action params

![actions are created based on your reducers in your slice. actions are functions, but don’t call them directly - they have to be dispatched](https://dev-to-uploads.s3.amazonaws.com/i/s306yio4ge83ywr9wu8j.png)


## 7.

To call the action, you "dispatch" it to the store

Use the "useDispatch" hook to get access to the "dispatch" function

then dispatch your action using that function

this automatically updates all components using "useSelector"

![useDispatch can be used in any component under the Provider. dispatch is a function that takes the result of calling your actions. Make sure to call your action functions!. Then onClick, this will dispatch the "down" action to the store](https://dev-to-uploads.s3.amazonaws.com/i/6nyezudcy84c6hd9dbr7.png)

![A counter counting up](https://dev-to-uploads.s3.amazonaws.com/i/3mrwcfpb351pa275gibe.gif)


## 8.

Actions can take params as well, which are passed in as the second argument to the reducer

the action "payload" will contain whatever is passed to the action

(to pass multiple params, use an object)

![The dispatched action comes across as the second argument to the reducer functions. The action payload contains the params passed to the  action function](https://dev-to-uploads.s3.amazonaws.com/i/fo7qeiq7ikymficabbi1.png)

![Your actions can now take params and pass those values to the reducers as the "payload"](https://dev-to-uploads.s3.amazonaws.com/i/weikb7ga0dp6fg5602l6.png)

![A counter going up and down by ones and fives](https://dev-to-uploads.s3.amazonaws.com/i/3hb393jb8od2wlktyg00.gif)


## 9.

For async actions (like fetching data), you can use redux-thunk (already included!)

Create a thunk (function that returns a function)

it's async and gets dispatch as a param

dispatch inside your thunk function

Then dispatch that action like normal in component

![A thunk is a function that returns a function. The returned function will get immediately called and given dispatch as a param. Perform async actions like data fetching. Then dispatch whenever your data is ready](https://dev-to-uploads.s3.amazonaws.com/i/oj54lyb9rks35i2nzmka.png)

![Your thunk can then be dispatched like any other action!](https://dev-to-uploads.s3.amazonaws.com/i/hk8w9mc6j471h62d9xru.png)

![Counter counting up by 1, and then counting up by the length of text returned by localhost](https://dev-to-uploads.s3.amazonaws.com/i/8stpahv01hpeknw6xmbv.gif)


## 10.

What about just using Context instead?

Yes, I generally start projects with just context, but redux can have some advantages for larger projects or teams:

- provides structure that context doesn't
- can be easier to test
- redux dev tools are pretty cool 💯


## Resources

Code for this example:
https://github.com/chrisachard/redux-toolkit-example

Quick start redux-toolkit docs:
https://redux-toolkit.js.org/introduction/quick-start

Redux devtools chrome extension:
https://github.com/zalmoxisus/redux-devtools-extension

The current redux maintainer and general keeper of many links:
https://twitter.com/acemarke


<br />
<br />

### Like this post?

Check me out on twitter!  I post software dev tips and threads there: https://twitter.com/chrisachard 🙌