DEV Community

Redux Toolkit Basic Intro

Brittney Postma on May 25, 2020

Hi, I'm Brittney and I'm an instructor over at ZTM Academy and the owner, designer, and developer at bDesigned. You can find more dev notes by me a...

Read full post

miku86 • May 25 '20

I love RTK, it reduces a lot of boilerplate that makes it sometimes hard to understand the (simple) concepts behind Redux. @markerikson is doing a great job!

Mark Erikson • May 25 '20 • Edited

Thanks!

Since we're on that topic: I'm currently working on a new "Quick Start" tutorial for the Redux core docs, which is meant to be a higher-level "here's what to do, the right way" tutorial for people who have never used Redux before. It's going to teach RTK and the React-Redux hooks as the default approach for using Redux.

It's not done yet, but I'd appreciate any feedback folks might have on the WIP content I've got so far (do the explanations make sense, questions that aren't answered after reading, things you want to see covered, etc). You can view the preview here:

deploy-preview-3740--redux-docs.ne...

Hoping to get Part 3 of that tutorial put together today or tomorrow.

Brittney Postma • May 25 '20

💯 He is doing awesome and is helpful and active in the community!

Mark Erikson • May 25 '20

Nice post, and glad to hear that RTK is working well for you!

A few quick notes on the code samples:

First, you may actually have a small issue with one of those reducers:

reducer: ( state, { payload }) => state.push(payload),

Immer wants you to either return a new value, or mutate its state, but not both. This is mutating with push(), which is fine, but also returning the result of push() because of the implicit arrow return. Immer will probably yell at you for that. You can fix it by throwing curlies around the body, or putting void in front of the body.

The findIndex() calls look like they're missing a = assignment. Personally, I'd call find() instead of findIndex():

const todo = state.find(todo => todo.id === payload.id)
if(todo) {
  todo.completed = !todo.completed;
}

Finally, while it's totally fine to use a findIndex() + a splice() to remove an item, I find it's usually shorter to do it with a .filter() instead and just return the new array same as you would with more traditional hand-written reducers. (And that's one of the nice things about Immer and RTK - you can mix and match update styles as appropriate!)

Also, the link to the "Why RTK uses thunks" post is going through an odd Youtube redirect first. The actual link is blog.isquaredsoftware.com/2020/02/... - would be good to update to point to that directly.

Brittney Postma • May 25 '20 • Edited

Okay, I will update it now. I guess I didn't proofread very well. I believe I made all the changes except the filter instead of slice. Haven't had my coffee yet and my brain isn't working 😂

Thank you for the input and let me know if anyone else sees more typos 😉

All updated now and made sure it was functional. Helps to code with spellchecker and linter 😂