Intermediate React

Intermediate React Action Creators & Actions


This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React course:
The "Action Creators & Actions" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

Get the actions into Redux through action creators.

Get Unlimited Access Now

Transcript from the "Action Creators & Actions" Lesson

>> Brian Holt: This is it for reducers, right? This is how you, hopefully you kinda see that you just throw actions at reducers and you grab it's own old state and it'll modify that. And then it'll inform Reactive, things have changed, right? That's the kind of the process with the store and the reducers.

[00:00:16] Now we have to see how do we get the actions into Redux. So we're gonna cover two concepts here, action creators and actions, which are separate things.
>> Brian Holt: So I want you to come in here, and I want you to create a new directory inside a source called action creators.

>> Brian Holt: Okay? As is self-descriptive, these are functions that create actions. These are also quite simple.
>> Brian Holt: So we're gonna create another file in here and we're gonna call it change animal.js.
>> Brian Holt: The only thing this function does is it creates a well-formed action. So here I'm just gonna say export default function changeAnimal.

>> Brian Holt: And this takes in whatever data it needs to for the payload. So animal,
>> Brian Holt: And it returns a well-formatted object. So the correct type, which will be CHANGE animal, sorry, SET_ANIMAL.
>> Brian Holt: And the payload, which will be animal.
>> Brian Holt: Pretty simple, right? That's it. That's all action creators do, is they take in some sort of data and they return to you a well-formatted object.

[00:02:04] Now I'm showing you what the community I think considers the best practice here. I didn't invent this pattern of having separate functions called action creators. Sometimes your action creators can be a little bit more complicated. Rather than just setting just the animal, it can set a whole bunch of data, right?

[00:02:20] And so creating the correct structure for these actions can be a bit burdensome. Obviously, this one's not, two different things. Some people would just inline. These action creators will not have separate functions that do it. I just did here to it because that's what the community does. So this is up to you.

[00:02:40] And you'll kinda get a little bit more of that as we go along. But we have a couple more that we have to do. We have to have changeLocation.js, and this is gonna look relatively similar, changeLocation.
>> Brian Holt: This is gonna be location, location, and SET_LOCATION.
>> Brian Holt: As a side note, these things are literally the ideal use case for snapshot testing.

[00:03:16] This is, don't do that, this is a JSON structure that would be perfect just to say expect,
>> Brian Holt: changeLocation,
>> Brian Holt: Seattle, WA,
>> Brian Holt: toEqual,
>> Brian Holt: type SET_LOCATION and payload,
>> Brian Holt: Seattle, WA. So you could write it like that. This is a little bit burdensome so you could even just make this a snapshot, which will make it toEqualSnapshot.

>> Brian Holt: And that's pretty cool. Testing these action creators like that is really compelling, and I think this is really why a lot of people opt for this kind of structure, right? Cuz this is going to store a snapshot test inside of your Redux directory. That's gonna say like, hey, if someone comes in here it's like, you know what, I wanted to call this change location.

>> Brian Holt: This would fail the test, right? Either one of these.
>> Brian Holt: So that's one good reason to have this cuz they make this particular part testable and make sure that someone doesn't come in the future and change this to make it not work the way they expect it to.

>> Brian Holt: Okay.
>> Speaker 2: Is that just basically a warning to say, don't change this when it fails?
>> Brian Holt: Yeah, so you wouldn't put these inside of here, you'd put this inside of your test directory, right? But yeah, it basically makes your other developers or your future self remember, it's like, I can't change this because other stuff depends on this.

>> Brian Holt: The thing that I try and guard against in particular with tests is innocent mistakes like that like change the name of a action type. One, you should probably know if you read any amount of Redux that action types are very sensitive. [LAUGH] If you just even misspell set location, right, if I did that, it's pretty easy to overlook that you did that.

[00:05:30] So I try and guard against those kinda innocent mistakes.
>> Brian Holt: Okay, one more chain of breed
>> Brian Holt: ChangeBreed.js.
>> Brian Holt: Breed, breed,
>> Brian Holt: And SET_BREED.
>> Brian Holt: There you go. That SET_BREED as well, and remember all of the cascading data affects our handling our reducers. So here, it doesn't have to do anything special, it's just this is better breed,

>> Brian Holt: Reducer looks like.