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

[00:00:02]
>> Steve Kinney: What we're gonna do is, we're now going to implement Flux throughout this application. First thing I'm gonna do is just start a new branch, before I forget, I will close one.
>> Steve Kinney: Live code in Flux. We're gonna go through two stages of these. Just FYI, there is a flux branch, with it implemented, and a flux with render props, that we'll see eventually as well.

[00:00:28] So this will be the life putting one that we do, but we also have two known good states, because this is quite a big live coding refactor. So wish me luck. I would say, if you see something, say something, because I probably didn't. All right, so we know that the very first thing we need to do is, before we can implement Flux into the application, we need to set up Flux, right?

[00:00:55] So, we know that the very first thing that we should do is likely create that dispatcher. Now this has got a components directory, which I don't want to create it in there. So, create in source and we'll create
>> Steve Kinney: app dispatcher .js. And the app dispatcher is blissfully the easiest part of this to implement.

[00:01:23] Import dispatcher from flux.
>> Speaker 2: [INAUDIBLE]
>> Steve Kinney: Yes. [LAUGH] It's a secret. All right, look at that. [LAUGH] We've imported the dispatcher from flux. And so, now we will export default a new dispatcher. All right. So we need actions, and we need a store. And then we need to wire it all together.

[00:01:56] So let's start with the actions. Does it really matter which order we do it? But yeah. So, we're gonna have three major actions, to create the actions file.
>> Steve Kinney: What are the things that can happen to the items themselves? I think, in this branch, I have taken away the filter bars for a little bit, so we can add an item, we can remove an item, and then we can change the status of the item.

[00:02:30] Right, so the three major things that we are going to need to do. And luckily, there is a little bit of prior art for how this works. So for instance we know that like, if we go into the items, or the application rather.
>> Steve Kinney: We can see addItem, right?

[00:02:52] We get the item, so we've gotta figure out where that comes from. So we can go down into NewItem.
>> Steve Kinney: And we see that we do this, onSubmit, we're gonna create the whole item. And we do this is in the view layer, which I told you earlier today that I didn't feel great about it.

[00:03:09] We are going to do it, because where else do we put it? But, we have a place to put it now, the action should take the bare minimum information from the UI, and get the action ready. Right, so the action creator is definitely the place for this to happen.

[00:03:23] And so what we will do is, we will kind of copy this for now, and I'm going to be very gentle with this. And we'll make a new, we'll import the AppDispatcher.
>> Steve Kinney: Okay, and we'll create this add item function. This is the one we've previously been passing through our component hierarchy, that we're not gonna do anymore.

[00:03:48]
>> Steve Kinney: And the only thing that is, like, unique is whatever was in that input field. Right, that is the kind of ephemeral state that we need. Everything else, like getting the new unique ID, we can do that in here. Setting it to false, that could happen in here.

[00:04:04] The only thing unique that needs to come from the UI, is the value, right? So let's also pull in, we'll do this one line up, import. And again, if we had a server, then that would handle doing this.
>> Steve Kinney: But we don't, so we're doing it kind of all client side.

[00:04:30] And so have the value in here, we'll just say app dispatcher. And we'll dispatch that event. And we know that's gonna be the type. We'll call it add new item.
>> Steve Kinney: And the item will be the value that came in. We'll set pack to false, and we'll have, I have too many curly braces and not enough colons.

[00:04:57] We'll have the value that came in, packed to false and that unique ID, exactly what we're doing the view layer before, it didn't feel very good about, we'll now do in here and feel perfectly fine about. All right, the two other things we need to do, we will mark those with a "toggleitem".

[00:05:19] We'll get to this in a second. And we will remove an item. Cool, let's fill those in. We know that this will probably take a full item. So we have those available, and we want to be able to take it from the other place in the app. So, and then we'll remove the item, which will again take a full item.

[00:05:43] I'll do some stuff in a second. All right. Very cool. So we have those two in place, and remove item is gonna be pretty simple right now. With the action created, we're not changing anything in the store. We're just getting all the information necessary to, when this action finally makes it to the store, the store knows what to do.

[00:06:07] So it needs to know the type, and what's the other thing, if it's gonna remove an item from the store? What's the other thing it needs to know?
>> Steve Kinney: What item do you want me to remove, right. So we will go ahead, and in the same way, we're not adding this item to the array here.

[00:06:22] We're simply getting the payload, with all the necessary information that we need. So we'll just AppDispatcher.dispatch.
>> Steve Kinney: 'REMOVE_ITEM'. And we'll pass through the item. There's a little piece of me, that thinks that coming up with the ID and stuff can get handled in the store as well. I'm kind of on the fence, normally you have a server that's giving stuff IDs, so it's not really a decision that you're making in your application at this point.

[00:06:56] It's like, I posted to server, I got something back with the ID and the default properties. So this is a unique situation in the fact that, like, we're doing this all client side right now. So, I'm gonna leave it here, seems good right now. And we'll do, we'll kinda keep a theme here.

[00:07:10] So, we'll trigger a, when I toggle an item, we're gonna trigger an update item action within, we'll give it the item with the opposite, right? So, we're gonna update it, but we'll have like the new version in place. So we'll say UPDATE_ITEM.
>> Steve Kinney: And then the item is gonna be, the item that we had and all of its properties.

[00:07:31] And this looks familiar, this probably exists right now in your application component. So,
>> Steve Kinney: Cool. And I'm getting yelled at for, let's hover over and find out.
>> Speaker 2: [INAUDIBLE]
>> Steve Kinney: Yes. It's just lonely object here. I'm better than this, I can cut and paste, I don't need to type that again.

[00:08:05] Dispatch. Got curly brace confused. That's why I should only write copyscript from now on, I wouldn't have these problems. Too soon?
>> Speaker 2: Definitely not [INAUDIBLE]
>> Steve Kinney: So, we've got our actions set up. We've got our dispatcher set up, we've got our action set up. We're like two-thirds from having a flux implementation, so now it's like the hard part.