Intermediate React, v4 Action Creators
This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Action Creators" Lesson
>> We're gonna do the action creator pattern here. We you don't have to do it this way. I think it's just helpful at least for me. So I want you to make another directory called action creators. So when you dispatch these actions, just like we were talking about, they have to be of like a particular shape, right?
[00:00:28] Where it has to have a type and a payload and all that kind of stuff. People will just craft those objects on the fly, which can be kind of annoying. If you make an action creator, it's just a function that takes in a payload and returns a well-shaped object.
[00:01:08] So let's do changeTheme.js. All you're gonna do is export a default function here called changeTheme, that takes in a theme parameter, and returns a well formed object of CHANGE_THEME. And its payload is theme. So it's just a three liner. So again, instead of making an action creator here, you could just craft this object every single time that you need to.
[00:01:42] It's up to you if you find that offensive or not. You can have action creators that maybe do a little bit more. I wouldn't really imagine that they would do too much more, but you could. Okay, and so we're gonna go make a bunch of those too, right?
[00:01:59] So we're gonna create one called changeAnimal.js. It's gonna look really similar, changeAnimal, animal, CHANGE_ANIMAL. The big win here is that you don't have to remember the type, and you're never gonna fat finger what this very special string is. Okay, we'll make another one for breed, changeBreed.js. Breed, breed, breed, Breed, and breed, Okay?
[00:02:47] And then you guessed it, changeLocation. As you can see here, I'm showing you one way of doing this. There's a lot of people with a lot of opinions about what's the correct way to write Redux. And I'll let you argue with them cuz I'm very sick of arguing with them over the years.
[00:03:21] Basically, of all the patterns that I saw, here's the most common one I saw emerge. Okay, so one more thing here. In previous versions of this course, I think V4 is the last time I taught this. I actually did show you how to do Redux Thunk and how to do async.
[00:03:42] Instead of dispensing an action here, you dispense or dispatch. You dispatch a function to Redux, and Redux would run a function for you to do all the async thing, which would then later dispatch a function to the store. But we're not gonna do that today. Yeah, Mark.
>> Dispatch will run through all reducers in order, correct?
>> That's a good question. What order does combine reducers go in? Well, one, your code, not only should it not care what order it goes in, it can't. It can't because all these functions need to have no side effects and not care about the environment that they're running.
[00:05:02] Some engines don't respect it, whether or not they should. Probably, all modern engines would. Cause a lot of mismatched information. The key underlying message there is don't depend on an order. In case you're wondering there, I think they're referring to this order here. So location would be called first, then breed, then animal, then theme.