Advanced State Management in React (feat. Redux and MobX) Flux Solution: Using the Item Store in the View

Transcript from the "Flux Solution: Using the Item Store in the View" Lesson

[00:00:02]
>> Steve Kinney: So now we've got an item store, we've got some actions, and we've got a dispatcher, we are most of the way there. I'm gonna start on the place we the most amount of wind, and that is like the bottom of the tree, right? It would be cool if I could remove and check an item or I'll pack and unpack an item without having to navigate up and down the tree, right?

[00:00:30] So that seems like the most easy place to get like a quick victory here. So I'll go into the individual item and you can see that onChange it's whatever onCheckOff has passed in. And, remove that's whatever onRemove has passed in. But I have a title now, right? I have a Remove.

[00:00:53] I can just get this from the store and not have to get them from anywhere in the hierarchy. So we can import,
>> Steve Kinney: ToggleItem and removeItem from the actions. Okay, so now, I have two choices, I can make anonymous function, I get recreated every time this rerenders. So I can pass the actual item in, or I can create some methods, so I'm just gonna do that.

[00:01:27]
>> Steve Kinney: We'll call this one handleChange.
>> Steve Kinney: And I'll toggleItem,
>> Steve Kinney: With the item that was passed in. And we'll say handleRemove,
>> Steve Kinney: And that will move the item.
>> Steve Kinney: So right now this won't really do anything, cuz like the application is still using the other array. But let's just cheat for a little bit, let's just live in a happier world.

[00:02:05] And what we'll do is we'll go into this store, and I just have to wire these up, so then I can come back in here. And we'll say this.addItem(action.item).
>> Steve Kinney: And here, we'll say this.removeItem(action.item). And here was this., oops that's toggle.
>> Steve Kinney: UpdateItem.
>> Steve Kinney: This.updateItem, this.removeItem
>> Steve Kinney: And what we'll say is when we're in the process of removing item let's console log to see if it works.

[00:02:58]
>> Steve Kinney: All right, cuz this is the one that we didn't pass down the hierarchy but we still have all of the different, that other array and application right now. So we won't see the change just yet but it would be interesting to try it out. All right, so I'm gonna go over.

[00:03:22]
>> Steve Kinney: I'll just open my fifth port today, it'll be fine.
>> Steve Kinney: Let's hit Remove, hope it actually works. That's interesting
>> Steve Kinney: Make sure we saved our files, nope.
>> Steve Kinney: Let's try that out now.
>> Steve Kinney: Oops, still working, that's interesting because I didn't replace these. You make new methods, you don't pass them in, they don't work, fun fact.

[00:04:17] This.handleChange.
>> Steve Kinney: This.handleRemove.
>> Steve Kinney: All right, now, we will either see a blowup or we will see that console log. Cuz I will pay the price for writing too much code between checking the UI.
>> Steve Kinney: We got a blow up and I can't read this top property, props of undefined.

[00:04:47] Anyone wanna take a lucky guess? I already know. These aren't bound to this, I didn't use my fancy new syntax. So I either have to this.handleChange to bind this, it's because I can't find this.props.
>> Steve Kinney: Programming is fun everyone, you should all do it.
>> Steve Kinney: If the stuff was easy it would be data entry and they wouldn't pay us.

[00:05:16] So,
>> Steve Kinney: Or it will stop loading now?
>> Steve Kinney: Right now I'm getting nothing, so let's see. We've got this handleRemove
>> Steve Kinney: So we got,
>> Steve Kinney: All right, so we're in the item, but let's see, let's go up to the next step. So this is the action creator, so let's go there.

[00:06:22]
>> Steve Kinney: My suspicion is we get there but we're not, we flubbed the string
>> Steve Kinney: All right, so we got into the action creator. Next, we go to the dispatcher, which is gonna send it to the store
>> Steve Kinney: If action type is remove item.
>> Steve Kinney: This is from what I had submit that quit before that I knew everything was.

[00:07:06] This is called a karma.
>> Steve Kinney: All right, so we never get there. So let's go up a level.
>> Steve Kinney: Let's say we're in the store and we'll console out of the action, as well.
>> Steve Kinney: Give it a refresh.
>> Steve Kinney: Okay, so we haven't gotten there. Cool, so I'm trying to figure out what the issue is.

[00:08:02] We've got the appDispatcher and we're registering with it. Clearly it looks like that is working for me but I am never receiving the action.
>> Steve Kinney: So here we're dispatching.
>> Steve Kinney: We know that we get here. We've got this REMOVE_ITEM type.
>> Steve Kinney: What's up? No? [LAUGH] All right, so let's see.

[00:08:42]
>> [INAUDIBLE]
>> Steve Kinney: No, if it's just one argument you can omit it, right in ES6.
>> Steve Kinney: Cool, so we have app dispatcher, we're registering it, we can see that's a thing. We're not getting the action at all in here which means that it's not registering.
>> Steve Kinney: We call in the new items store.

[00:09:14] I'm gonna check real quick in the construction to see if it's actually building
>> Steve Kinney: All right, so we're just coming back from a minor technical issue where we weren't seeing the events. And the reason for that was we created the item store in itemstore.js, but because we never require that file, it was never evaluated and ran.

[00:09:38] Which means this new item store never executed, which means the constructor never executed, which means we never registered the events, which is why they are getting swallowed. So to fix it, all I did real quick was I imported it into application.js where I'm going to need it eventually anyways.

[00:09:56] So now when I flip back over, if I hit Remove, you can see that the remove item is at this point, being called. So let's actually go and see that individual item as well. We can that we're calling remove item that's happening in the store. This is not getting passed down from application to item to the item anymore, this is being pulled directly in.

[00:10:23] This could be very far down, our component hierarchy and we could still pull in this actions and this state, right? And here we only, the action still makes sense to have that in the application, because that's where we gonna filter between the two lists. But we don't have pass down that action anymore.

[00:10:40] So really other than receiving the item itself, everything else is at this point pretty like self contained, which is very cool. Cuz like we would need to know what item it was anyway, so it makes sense for the thing that maps over it to do that.