This course has been updated! We now recommend you take the React Performance course.
Transcript from the "Action & State Modification Solution" Lesson
[00:00:00]
>> Right, so I'm gonna do it. And what I'm gonna do first is, steal the actual kind of mechanics here. So I'll grab this grudges, and we'll say if action.type *** GRUDGE_FORGIVE. Then what we're gonna wanna do, is not get too carried away with the commenting on commenting of the code.
[00:00:30] We'll change this to state. But really, we just want to return this new array. So, you'll notice the actions, every action flows to the reducer. We're just caring about certain ones. If it's a grudge ad here's what we do. If it's a grudge to give, here is what we do.
[00:00:48] And I prefer if statements that return, you might also see case in switch statements. I don't like them. I think this is just easier to kind of like reactor later on and break stuff out, rather than having the middle part of us which statement. So I'll put that in there as well.
[00:01:06] So there we've got the mechanics and now we replace this with dispatch. And we'll say that the type is, we have to change something else up there as well. Type is GRUDGE_FORGIVE, and then the payload will be an object to that ID. And so that is one change before we're just doing it with the ID.
[00:01:33] Now it's gonna be action.payload.id. So go back and fix that as well. Great, let's verify that, that works. Everything works. Now you know we still defending all the place. Now, if you think about it before, like grudges are the only thing that are changing. It'd be great in some cases for instance, the individual grudge.
[00:02:03] If it got a new grudge, yeah, re-render. But just for the dispatch part, that should be fine. A new grudge, it's only getting an action, or it's only getting a function that adds one. It's not re-rendering just cuz someone hit forgive. But it is rendering, but it shouldn't.
[00:02:19] And dispatch is very much like use ref, in so far that it is the same reference function every time. That dispatch function has the same memory reference on every render. Which means it'll be the same one.