This course has been updated! We now recommend you take the State Management with Redux & MobX course.

Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Coding Flux: Action Creators" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Shows how to impliment action creators handled by the Dispatcher.

Get Unlimited Access Now

Transcript from the "Coding Flux: Action Creators" Lesson

[00:00:03]
>> Steve: I could all over my application, make these objects by hand. That's a thing that I could do. That's error prone and problematic for a lot of reasons. Especially if there's some normalization formatting. I don't wanna do that all over my application, I wanna keep it dry. So we tend to use this pattern called action creators.

[00:00:23] What is an action creator? Is a function that creates an action [LAUGH], right? There is nothing special going on here. It is simply a function where you pass in whatever you need and outcomes one of these objects. And it says there's a problem of having things like incorrectly formatted and stuff like that.

[00:00:45] So we'll say we're gonna use this layout, so export const. And I'm gonna call this one update number of people. And it's gonna take a value and this looks very similar to what I was doing with set state in the components before, right? It was like I had a instance method called update number of people that took a value and then set state, right?

[00:01:09] The difference here this time is, what we're going to do is we're gonna dispatch the action. So I'm gonna do this long formula then I'll shorten it. So the action could be,
>> Steve: This right here. And we know that I wanna take the value that came in. And cause ES6 is wonderful.

[00:01:28] I can short hand that because not only the ES6 is wonderful but my font is large. So, we can take that action and we take out Dispatcher. We call Dispatch method and we pass that action, right? And so all an action creator does is takes some things and makes the action object, and then sends it to the AppDispatcher, that's it.

[00:01:50] Let's make a few more of these real quick. No surprise what they're going to be. That's why we use example applications.
>> Steve: So what I could do is, I can shorten this a little bit. Like I don't necessarily need to store this in a variable if I'm immediately gonna use it.

[00:02:11] So what I'll do probably, AppDispatcher.dispatch, and then I can just do the object in here. I'll say type, the type is gonna be UPDATE_SLICES_PER_PERSON. And again, it'll take the value, cool. And we'll make one more.
>> Steve: Reset and reset is not necessarily gonna take a value, cuz we're just gonna turn it to what it was before.

[00:02:44] So that one's gonna be even easier. AppDispatcher.dispatch.
>> Steve: And we'll just say the type. We'll keep it simple. It's just reset. All right, so all action creators are simple functions that go ahead and create these objects and we send them to the AppDispatcher. We're going to see this pattern again in the future.

[00:03:14] And hopefully by then I'll remember how to type arrow functions. Very cool, and so we've created a bunch of actions.