Advanced State Management in React (feat. Redux and MobX) Coding Flux: Dispatcher and Actions

Transcript from the "Coding Flux: Dispatcher and Actions" Lesson

[00:00:02]
>> Steve Kinney: The first thing we're gonna do is we're gonna create a dispatcher. I'll explain what dispatcher is in one moment, but let's actually make it first.
>> Steve Kinney: So I'm just gonna call this one AppDispatcher cuz that's a common pattern. Flux is a pattern, there's not a flux library.

[00:00:23] You can npm install flux and you basically get a very lightweight set of tools, you do not get the entire flux pattern. You get effectively a dispatcher and some utils. So let's actually pull that in.
>> Steve Kinney: So the Dispatcher is gong to be the thing, that's a very technical term, in your application that receives a bunch of things that happen and figures out what to do with it.

[00:00:57] If you've ever used the pub-sub pattern before, right, where it can broadcast out things, think dispatch, right? It's similar to that with one important difference. With the pub-sub pattern, you usually subscribe to given messages that you want to respond to. So if you've ever used an event listener in jQuery or Vanilla DOM, you've effectively used the pub-sub pattern, right?

[00:01:18] You say add event listener for click events and trigger this function. And so you've done this, maybe you've never thought about it as the pub-sub pattern but that is technically what the pattern is called, but it's I list for certain things. With the dispatcher its going to just anyone who says they are listing to Dispatcher is gonna get everything, right.

[00:01:36] It's just like radio rather than calling people up on the phone, right. Everyone is gonna hear everything and they can decide if they're gonna do something with it or not. So, really what we want to do is just make a new instance of the Dispatcher. This is gonna be our entire Dispatcher file.

[00:01:54]
>> Steve Kinney: The default export is gonna be a new Dispatcher.
>> Steve Kinney: All right, questions about this code?
>> Steve Kinney: I grab Dispatcher library. Maybe we can take a look at it later and see what's inside, but we grab the Dispatcher library. It's effectively just going to the thing that receives actions and broadcast them back out, right, that's effectively its job.

[00:02:13] We just need one of this and rather than write around, we're just gonna grab the one from this library, cool. Okay, so like I said before, we are going to receive actions and broadcast them out. So it seems like I'm gonna have to start implementing one of the two there, which is either get actions to the Dispatcher or start listening for them.

[00:02:34] Just in a chronological order argument, it seems to make sense that I should get some actions into the system first before I start to listening to any of them. So what I'll do is I'm gonna create an action's file. Now in a bigger app, would I put these all in the main directory?

[00:02:51] Probably not, but I'm gonna be creating single files. In the code, where we have an actions directory, and it has many files in it but the sake for not having crazy relative paths I'm just gonna keep it simple right now. So we'll create actions.js. And an action is basically, you get a notification that something happened, so let's actually pull in our AppDispatcher.

[00:03:25]
>> Steve Kinney: Right, so we're gonna tell the app dispatcher something happened. Right, and then eventually it's going to tell other things that something happened. And what an action effectively looks like is just an object. It's just a plain old JavaScript object. And that's why there's no flux library, its, there's an object.

[00:03:45] Usually we need to know what kind of action happened, right. The user can do a lot of things in your app. They can increment a counter, or they can change pizza calculators, or they can mark something as packed or unpacked. The user's gonna do a lot of things, so we usually say, what type of action it is.

[00:04:03] And I'm gonna call this property type, but it doesn't actually matter what you call it. You shouldn't call it sandwich, cuz that doesn't make any sense, don't do that. But you'll see it called sometimes action type, I'm gonna call it type for reasons that we'll get to in the next section that something else just happens to use type as a common pattern.

[00:04:24] So type and it could be anything in this case. But what's a thing that could happen in my pizza app where we have those two fields? What's the top field? This is a pop quiz to see if anyone remembers the UI of my very complicated pizza app. It's the number of people, right?

[00:04:41] And so what happens when someone changes that? They update the number of people, right? So let's say that's an action that could happen in the application. And basically what you do is you look at the UI of the application whether it's the UI that you currently have or if you're starting fresh the mockup you got from the designers, right.

[00:04:57] What are all the actions that a user could take? So we could say,
>> Steve Kinney: UPDATE_NUMBER_OF_PEOPLE. And when you tend to use strings, because strings are easy to serialize, a pattern that you'll see later that we're gonna use is storing these in variables called constants. The main reason for this is auto-complete is wonderful.

[00:05:21] And if you create a variable you get auto-complete. And if you don't, you have to make sure you don't mistype this string. And if we think about my live coding track record so far today, that's probably unlikely that I'm not going to make at least one boo boo typing this string.

[00:05:34] But for simplicity we're not gonna do that right now. So this is the simplest possible action, we're gonna say update the number of people. But there's more information that we need in order to do that, right? Ideally if it was at 10 and they change it to 11, we do need to know that value, right?

[00:05:53] So an action is the thing that happened or the type of thing that happened and the bare minimum amount of information that you need in order to communicate that. So really the only thing we need beyond that is some value.
>> Steve Kinney: All right, which is whatever the new value of the input field is.