This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Action Creators" Lesson
[00:00:01]
>> 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:00:45] So there are little helper functions. And I'll say that I see a lot of people do it this way. So you can either make one actionCreators.js and export a bunch of times. That's totally valid or you can do this where you're just gonna make a directory that has a bunch of individual JavaScript files that are very short.
[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?
[00:04:04]
>> 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:04:23] So if you depend on an order being correct, you're not doing Redux correctly, and you're gonna have bugs arise from that. However, I'm pretty sure that that assumption is technically correct, that whatever order you put them in should be the order that it runs in. But it's also, I think, dependent on the JavaScript engine that's running it.
[00:04:45] I think according to spec, if you call object.keys on something, I don't think it has to be the back in the order that it was set in. You'd have to read the spec at that point, cuz now, we're really into the find details of how JavaScript works. But certainly, I'll say this.
[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.