Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "MobX Solution: Models and Components" 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:

Injecting the MobX models into React components.

Get Unlimited Access Now

Transcript from the "MobX Solution: Models and Components" Lesson

[00:00:02]
>> Steve Kinney: All right, so let's try to implement the ability to remove one, as well as the ability to toggle it between the two lists. So previously, we added a remove method for the individual item, and that is a bound action, right? So we can go item.remove, and it should communicate back up to the list for it to remove item and pass itself in.

[00:00:28] So let's give it a shot and see how it goes. So we'll have the item being passed in. What I'm just gonna try to do at this point is I'm gonna say item.remove. We'll hope for the best. Assign a value we've never used. That seems all fine so far.

[00:00:48]
>> Steve Kinney: Oop, let's see. Remove item of undefined. So this.list. Let's check what we got.
>> Steve Kinney: Let's go check out the item list. Do pass. This has to be one over.
>> Steve Kinney: Mea culpa on that one.
>> Steve Kinney: I can add it, I can remove it. I can add it, I can remove it, let's implement, let's go for toggle.

[00:01:28] You're ready? All right, let's do it. This is where I think this stuff gets really exciting. So for toggle, we're just gonna say, action.bound toggle(), and we'll return this.packed equals the opposite of this.packed. And we'll flip back over to that item component, and we'll switch it with,
>> Steve Kinney: item.toggle.

[00:02:06]
>> Steve Kinney: So the item is passed in. It works on itself. It's not like we're dispatching actions to a store. The store changes a thing. It's like, hey item, do your thing, right. So now, we can say, hello. And it switches between the list, it's a list using computed properties.

[00:02:26] So one of the items in the list changes, that recomputes all the properties, the observer notices that the computer properties changed, and it re-renders the DOM. So let's take this a little bit further now. We'd love to get the filtering working. So far we've adding, we've got removing, we've got toggling.

[00:02:45] It will be very cool to get the filter to work as well. So that's going to involve a little bit of refactoring, like we need to get these doing something.
>> Steve Kinney: I mean they work because I'd say it works with them right now but let's try to do a little bit better.

[00:03:02] I would love for the list to be able to keep track of all of this. So what I'm gonna try to do is let the list keep track of what the search terms are, and be able to figure this stuff out for us. So let's go to the list.

[00:03:21]
>> Steve Kinney: And we're gonna, cuz we can just like add the logic to our data to our actual models. Which in an NVC pattern is where this stuff belongs, right? The model should be able to manage what the kind of state is in this case. So we've got the ability to get ourselves packed and unpacked items.

[00:03:37] It would be kind of cool to be able to say, hey, can you keep track of what the search terms are? And we can argue if there should be a smaller object that does this, but let's do it here now and then like refactor it in a little bit, or probably not refactor it, but.

[00:03:56] This isn't gonna be our bread and butter application, so we'll start out with a filter here, for unpacked items. We'll do one for packed items. And so how do we tell what the filtered items are? Well we have the list of items, we've also had the sublist of packed and unpacked items.

[00:04:15] We have this term, we can just compute it. On the fly, if either one of these changes, recompute the list. So let's go do that, so we'll say,
>> Steve Kinney: Filtered unpacked list, does anyone like that one, anyone have a better name.
>> Steve Kinney: And that is going to be return this.unpackedItems.filter item.value.

[00:04:56] So its name includes this.unpackedItemsFilter.
>> Steve Kinney: All right, cool. So we've got the ability to get to filter the unpacked items. And we'll filter the packed items.
>> Steve Kinney: And now really all I need to do is update those strings. Cuz if the strings get changed, those'll recompute these filtered lists.

[00:05:30] So what I'll do is I'll give myself an action, cuz I wanna bind it, I don't wanna make an anonymous function every time. I'm better than that.
>> Steve Kinney: Action.bound.
>> Steve Kinney: Update unpacked filter.
>> Steve Kinney: And that'll be, that'll take the new text. Let's say value. Cuz it's gonna be an input field, so we'll go with that.

[00:06:04] And we'll just say that this.unpackeditems filter now will equal the value. And the same thing for packed. Someone please keep an eye on my capitalization. All right so we have to update the pact. Update the unpacked filter. And those will change those as well. So now the only thing I've got to deal with is, I can actually go back into my application.

[00:06:35] And,
>> Steve Kinney: The items is in there right now, it's nested, because we had to pass stuff down before. And so I have this very generic items. What I'm probably gonna do is pull that out and change it. Cuz I can make different choices, cuz I can have everything almost on a flat level.

[00:07:00] So we don't need to worry about stuff as much. And so what I'm gonna do is I'm gonna pull the filter out here.
>> Steve Kinney: From the filter. So now I can use it here as well. And let's make sure it's not doubly in the items list now. We also don't need all of this craziness, because we are filtering ourselves, so we'll get rid of that.

[00:07:33] Like, that's not a responsibility with you anymore. We don't need any of this. I'm just gonna pass in the item and the key. And we wanna be able to have more control over this. So I'm actually going to let it be a child.
>> Steve Kinney: I could, however, use the render props pattern if I wanna do all sorts of different stuff in here.

[00:07:59] There's a bunch of different, like, options that I could do as well. But I feel pretty good about this one, he says. All those are just never used, things I'm removing so much code. So much code. So, let's go ahead and we'll go back to application. And this props to children, cool.

[00:08:19] So, that'll be the items. All right, I think I'm feeling pretty good about this.
>> Steve Kinney: And so in here, we'll just say, we'll give this a child.
>> Steve Kinney: And it will take itemList.packedItems
>> Steve Kinney: Filter. I don't like that I don't have autoComplete. So I gonna go check that file again.

[00:09:07]
>> Steve Kinney: We'll find out together. So this will be the search term that's passed in. And we'll say,
>> Steve Kinney: Update.
>> Steve Kinney: I'm just gonna go ahead and look at this because again, that lack of autoComplete does not make me feel good.
>> Speaker 2: Filtered packed.
>> Steve Kinney: Look at that. That's probably my issue right there.

[00:09:44] Which is kind of. So we got packed items, I've got filtered, packed list, filtered unpacked list. I think I said at one point, be careful with my capitalization. I'm gonna make a mistake. See, I'm testing you, is the thing. Cool.
>> Steve Kinney: Oops, still got the same issue. onChange is not a function.

[00:10:13] That should be coming as the props and filter 9.
>> Steve Kinney: So that's this onChange, which is coming in from this.props, so let's actually console.log this.props.
>> Steve Kinney: Cool. And I'm also still gonna go up that level and-
>> Speaker 2: So it's updatePackedFilter, but not updated [INAUDIBLE]
>> Steve Kinney: So I have updatePackedFilter, and in my model, I've switched it at one point, so let's grab that.

[00:10:59] updatePackedItemsFilter
>> Steve Kinney: All right, so we're changing it. We just need to use a new version. Cool, so I'm actually going to then, because it's still the entire list. We'll do the, what is the name of that one from before? We're now calling it the filtered packed list.
>> Steve Kinney: All right, cool.

[00:11:53] We got filtering working. Yay, let's do the same thing for the unpacked,
>> Steve Kinney: I think auto-complete is failing me right now, which makes me really sad. So let's actually copy this entire thing over, and we'll swap them out.
>> Steve Kinney: All right, so this will now be unpacked, unpacked, unpacked.

[00:12:32] Maybe we'll even change this one to unpacked.
>> Steve Kinney: Cool. All right, we have the entire application working except for this mark all as packed. But we could literally make a mark all as packed button, and just put a action on the item list which is just gonna set them all, tell each one to set them all to false.

[00:13:05] And we'll have that entirely in place. And let's actually do that real quick.
>> Steve Kinney: Mark all of them as packed and let's go ahead and let's inject the store into this one. Cuz now we can use it from anywhere. If we wanna move it to a different part of the UI.

[00:13:37] But I think a thing that we don't think a lot about in the reaction pointer hierarchy problem is like, it's all great until design says, can you move that over to the side bar? [LAUGH] Right? And then all of a sudden it's not because it was deep in your commodity hierarchy.

[00:13:50] If we kinda get it to the point where it's isolated. We can just literally move this button anywhere in the UI, and it's effectively gonna work. So we'll inject the itemList.
>> Steve Kinney: And this doesn't need any state, because it has everything that it needs in this case. So we'll take the itemList,

[00:14:12]
>> Steve Kinney: And we'll return
>> Steve Kinney: A button.
>> Steve Kinney: And we'll give it the class name fullwidth, cuz I believe that's what it has down there.
>> Steve Kinney: Mark all as packed. I keep wanting to call it mark all as read. That's not what we're building right now. Cool, and we'll say onClick.

[00:14:51]
>> Steve Kinney: itemList markAllAsPacked. And we just need to create that,
>> Steve Kinney: On the itemList.
>> Steve Kinney: Bound markAllAsPacked
>> Steve Kinney: this.items.map item.packed = false.
>> Steve Kinney: True if we make it packed. No we want them unpacked. I marked all those packed, so I mistyped this one. So let's actually, I probably mistyped it below, but good catch.

[00:15:50] Be like
>> Steve Kinney: All right, so change that, yeah, well I went whole hog on that one.
>> Steve Kinney: We'll use this button down here.
>> Steve Kinney: I've unpacked. We actually don't need this onSubmit anywhere either. I just need to finish what we were doing here. I feel like the highlighting is getting slow.

[00:16:28] Probably maybe it's just Visual Studio code is getting a little tired here.
>> Steve Kinney: Mark them all as unpacked, nope.
>> Speaker 2: Right there, that doesn't return the item in your map.
>> Steve Kinney: Where?
>> Speaker 2: This map here.
>> Steve Kinney: Nice.
>> Speaker 2: You should return item.
>> Steve Kinney: I think I had a little spoil with that syntax, right?

[00:16:56] The automatic returns but now when you're doing the assignments. Yeah, well I'm seeing the assignment doesn't return item. So, we have to study it and then return item.
>> Steve Kinney: Cool,
>> Steve Kinney: I can also use like the spread operator and just replace that value too. But, let's not get fancy here.

[00:17:18]
>> Steve Kinney: Nope.
>> Steve Kinney: Let's see, I'm also not convinced it was updated.
>> Steve Kinney: So we don't have that event list in there happening. Yep, because we didn't put it onClick. But we should have it here.
>> Steve Kinney: Cool.