This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "useReducer" Lesson
[00:00:00]
>> Brian Holt: useReducer. If you're coming from Redux, you'll feel right at home with this. And if you're not coming from Redux, you'll learn about Redux later. So either way, you're gonna be okay. So here I have this useReducer example. And what it allows you to do is change the color of this up here.
[00:00:22] So if I click plus red a bunch, this will turn red. If I turn plus green, it'll turn yellow. If I turn that it'll eventually turn white, right? Now, this is a lot of state to keep track of, right? I have to keep track of updaters and setters for three different things, right?
[00:00:40] And that's kind of a pain to do, right? It'd be really nice if I had one function that handled all these relatively similar operations. Well, that's what useReduce does for you. So useReducer is another hook. If you're not familiar with the term reducer, it means a function that you can run that takes in an old state, some sort of action, and returns to a new state.
[00:01:00] That's really all a reducer is. It's basically just a function with a certain call signature, okay? So here with useReducer I give it the actual function, which is this one up here, the reducer function. And then I give it an initial state. And this initial state is everything is black, right?
[00:01:22]
>> Brian Holt: Do note that this is different from Redux. With Redux, you expect it to run the reducer on the first time, this does not do that.
>> Brian Holt: In this case, you give it an initial object and that's how that works. Okay, and then here it gives you back two things.
[00:01:37] It gives you back the object, in this case, the current state of the store as it were. And here I'm destructuring out the r, the g, and the b. And then it gives you a dispatch function which allows you to dispatch an action to the reducer. So you can see here all these buttons, it's dispatching INCREMENT_R, DECREMENT_R, INCREMENT_G, DECREMENT_G, right?
[00:02:04] This is, in my opinion, quite readable code. So this is a really good case to use useReducer. And then if you look down here in the reducer, it takes in the current state of the object, the action. And then down here at the bottom, it returns the state, or all these actually return state.
[00:02:19] And all these are just object.assign, they're creating a new object, the old set of state, and then it's overriding the r, right? This limitRGB just makes sure that it doesn't go below 0 or above 255. Right, that's what this does. And then the step here is just going up and down 50, right.
[00:02:42] So if I click this, it's going up to 50 red, 100 red, 150, 200, 250, 255. Make sense? It's very Redux like. Now, what's great about this, this reducer, it's extremely easy to test. You just give it an old state, an action, and then test the output, right?
[00:03:08] Which allows you to test data mutation. And all bugs arise from problems with data mutation in some sense, right? So if you can actually test that and make sure that the mutation of state goes well. That's a big boon to you. That's the whole advantage of Redux in my opinion.
[00:03:23] So as you might imagine, this really replaces a lot of times when you need Redux, you can just use, useReducer, right? Well, what happens if you want to do it for your entire application? Well, you can use context and useReducer together. Basically Redux, right? It's about the same thing.
[00:03:43] So I don't use Redux as much anymore. I will still teach it to you so that you can make whatever decision you want to make about that. But I think context and useReducer largely supplant the need for it.