Check out a free preview of the full State Management in Pure React, v2 course:
The "Reducer Action Keys & dispatch" Lesson is part of the full, State Management in Pure React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates continues to refactor the reducer from the previous section, adding action keys and a dispatch. Action keys manage the state, a dispatch determines what changes are allocated to the state.

Get Unlimited Access Now

Transcript from the "Reducer Action Keys & dispatch" Lesson

[00:00:00]
>> Now one thing that you will see is, and you don't have to do this, you live your own life, you might see something like this. const GRUDGE_ADD. GRUDGE_ADD, and then the other thing we can do is we can FORGIVE, right? Why do we do this? To be clear, could you just use a string everywhere?

[00:00:27] You could, and when you make a typo, you will get no error. And then you will lose your morning again, and I don't want you to lose your morning, right? If you misspell the constant, everything will explode and you'll get a line number where you misspelled the constant and you'll move on with your day, right?

[00:00:45] And that is way better than sitting there and trying to figure out where you mistyped something. So you can avoid this part, you can ignore it if you want. If it stresses you out, you don't need to do it, but it is there. Especially if you find yourself live coding in front of people on recording, you probably wanna do things that don't get you weird errors where you don't have error message.

[00:01:07] So, now we have this idea of adding a grudge, right? When you need to announce that something has happened, right? We're not gonna do the state management any more in here. We're just gonna say, hey, they've submitted a new grudge. I would love to announce it to the world that they have submitted a new grudge.

[00:01:27] They have forgiven one? I loved to announce to the reducer that this has happened. So now all we do in this case, Is when a grudge has been added, right, we'll say, The only requirement for an action, And this is actually isn't even true in userReducer, but let's make believe it's true, is that it's some kind of object and that it has a type,, Right, Redux will actually tell you, this won't, but let's pretend.

[00:01:58] Now everything beyond that is up to you. I have recommendations. There's this thing called the flux standard action, which is just a convention, right? It says that you basically only have a few top-level keys, right? type, this one that says payload. There's another one that I've never use.

[00:02:20] We use this in our applications, meta. I think you can do error is true or false. To be honest, we don't use these. But everything is type, and then all the other data about the action goes in payload. Otherwise it's like, what keys are there on the object, right?

[00:02:35] It's just a way to kind of namespace it. The only requirement is as an actual object. It doesn't actually matter. But this is a very sane way of doing it. And without a convention, if you have a big enough team, people make up seven conventions and then nothing makes sense anymore.

[00:02:51] So just having some convention is better than anything else. So we'll say that the payload in this case is the, we'll just destructure this. We'll say, person, reason. Person, reason, and we'll also say that a definition has got a forgiven. If we're adding into the list, I thin it makes sense that they start out unforgiven.

[00:03:17] And we'll give it that, Right, all that id() function does, I'm importing that up here, is it gives me a unique id, right? If you had a server, the server would probably give it an id, but I don't have a server just yet. So all that happens is now, this add_grudge function, all it does is dispatch some information.

[00:03:43] Like, hey, a grudge has been added, right? And this is the information about it, right? And then what we can do is we can go in here and say, all right, reducer, you're being called into action. We'll say, If the action.type, Is GRUDGE_ADD. No, that's not a thing.

[00:04:11] Then do effectively what we did before, right? We'll say, return, It's called state, we can call it grudges. Right, they're the same thing, right, it's an array either way. So return everything else in there, Along with the, action_payload. That should do the trick. We got this extra comma, that can't go well.

[00:04:37] All right so put the new payload in there, which is, again, the person, reason, whether or not they're forgiven, right? The individual grudge, and the rest of the Grudges, right? It's very similar to what we had before, right? So now we can separate the, how do you manage to state versus the thing happened?

[00:04:58] Awesome, let's see if that works. Right, hello world is added in there as well. Forgiveness is not gonna work because we commented that out.