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

Steve adds MobX to the Jetsetter application. - https://github.com/stevekinney/jetsetter/tree/mobx-base

Get Unlimited Access Now

Transcript from the "Solution: Setup Models" Lesson

[00:00:03]
>> Steve Kinney: All right, so we're back. And we're gonna take a look at using MobX in action. And in this case, we're back in a basic version of with set state as we've seen it before and we'll begin to refactor pieces of it. And so, we're gonna have to create our models in this case.

[00:00:22] And really there's like two that we need in this very simple application. While we've had like one store with flux, it was an array and that array had individual items in it. What are we gonna give ourselves is the individual item, which will be in charge of the value, and the ID, and whether or not it's packed, as well as the abstraction amount, which is a collection of all of the items which can like figure out how many there are and stuff along those lines.

[00:00:46] It's basically an array with super powers that we're going to use in this case. So what I'm gonna do is I'm gonna start by kind of creating these two things, and I have this models directory in here. And I start out with just an item, right? The individual item, in this case.

[00:01:04] And there's a lot of interesting things that we can do with it, right? So let's start with bringing it in, we're gonna have to get a unique ID, mostly for a key for React, right? Cuz we don't necessarily need to go find the right one in a object, or something along those lines.

[00:01:20] We'll be able to deal with the reference rather than try to match some branch of the tree that happens to have the same ID. But React is gonna get very angry with us if we do not have a unique identifier for it, so we'll still use that.
>> Steve Kinney: So bring in unique ID and then we'll bring in some of the MobX helpers.

[00:01:50]
>> Steve Kinney: We're gonna compute it from the MobX. All right, very cool and we're just gonna make a class.
>> Steve Kinney: We'll have a class item, and this will have an ID. We're eventually gonna want a connection to the actual like all of the different items will kind of punt on that field a little bit.

[00:02:20] We're just like leave a little marker in there, right? Cuz it will be cool if an individual item could talk back up to the the collection, right? And like, hey, remove me or something like that. Cool, and we'll actually observe some values as well.
>> Steve Kinney: So the value and whether or not it's packed, cuz those things will be things where we change the UI based on them, right?

[00:02:49] If it's packed, it's gotta move lists and stuff along those lines. The ID probably won't change. I could observe that, you can argue in the current UI, the value doesn't change either, that is fair. But whatever. In a perfect world, it would. So the constructor, I'm just gonna be able to pass in a value, an ID that will default to a uniqueId and packed which will default to false.

[00:03:19] So now, and the reason that I'm using the object deconstruction here is that way I don't have to like know the order of the arguments. There's nothing special about that. If you wanna do just value comma, id comma, packed that works too. This allows me to like omit one of them or anything along those lines.

[00:03:40] All right, and so we'll say this.id equals id, this.value equals value, this.packed equals false, which I guess I have that in the, we need this packed. Cool, so will set up all those properties and we can do some interesting things here right. We could for instance, we could have computer properties.

[00:04:10] So all the times, how have I been checking the application if something is unpacked? I've been flipping the pass Boolean every time, right? What I could do is, I could say @computed and we'll just say get unpacked, and now just return.
>> Steve Kinney: This.packed. So now I can grab an individual item.

[00:04:41] I can say .unpacked and that will be the opposite, right? I can start to give myself those kind of very nice helper and utility methods. Cool, so we'll start with that. The other thing that we need is the item list. And let's go ahead and make that.
>> Steve Kinney: Call itemlist.js and let's take that for a spin, where we'll import observable again, observable computed action, which we will use in a little bit.

[00:05:22] So don't worry. And I told you that there is a special reason why I like to use action. I haven't forgotten, I will tell you.
>> Steve Kinney: And we will import the item from,
>> Steve Kinney: Dot slash item. All right, so let's make this class, export default ItemStore, just ItemList.

[00:05:49] I said at one point, I think I was gonna call it ItemStore and I decided against that. So what are the things that we wanna observe? So I'm thinking like, well, it is an ItemList, right? So it probably has some items array that we really don't pass in or override.

[00:06:04] It's always gonna be an array, so I can do that up here. I could also do that in the construct if I wanted to. We can start there. Things that I'm also thinking about is like, it could have a filter text, right, as well. And I'll worry about those in a little bit later.

[00:06:20] And I can use Computer Properties to do some cool things here. I can say computed, I can say get packedItems.
>> Steve Kinney: And we'll just say return this.items.filter.
>> Steve Kinney: Item, item.packed.
>> Steve Kinney: And so now I can, from my ItemList, I can say ItemList.items, I'll get all of them. But if I ever say ItemList.packedItems, I'm obviously only gonna get the packed items.

[00:06:55] And there is a subtle performance gain in here that our app would never get big enough to notice, which is we're not gonna re-call that filter unless the item's array changes. We will filter through that array the first time, and then we'll just memorize that and get that back every time unless the items change, cuz there's no point running through all of them again.

[00:07:19] The other thing we can do is in the same way we did packed, we can also do unpacked. And remember, the item has that property unpacked that will change. And this is gonna work in a nested way. If the status of one of them changes inside of the array, these will be recomputed, right?

[00:07:40] So our very simple like earlier that we wrote that fit on one JSBIN in one slide is not that sophisticated to deeply nest all of these things, but MobX is. All right, cool. So we have the ability to get all of them, get the packed ones, get the unpacked.

[00:08:01] I'm thinking the other thing I might wanna do is add one, right, to the list. So we'll call it, I'm gonna say action and I'm gonna say bound. Anyone want to take a lucky guess at what bound does?
>> Speaker 2: This bracket.
>> Steve Kinney: What's that?
>> Speaker 2: Context maybe?
>> Steve Kinney: Yeah, it does the same thing that this.addItem equal this.addItem bind this does.

[00:08:29] I don't have to do it. It will effectually, I can now in a normal, if I was just using MobX in the command line or whatever, it would be bound correctly. But in an event listener in React, it's not going to. I tend to give myself actions for everything I'm going to want to do, because then I don't have to worry about this.whatever.

[00:08:47] I know if I call this action, if you just say like, hey, why don't I just push one of them onto the array? And MobX is great, that works, right? You're totally correct. Except when you go to using a component you're gonna have to wrap it in an anonymous function anyway to register it as an event listener.

[00:09:02] I just give myself methods for doing all these things anyway, but you don't have to, cuz all that's really gonna do is, it's gonna say this.items. This.items.push, and I don't just want an object, right? I want one of these items, that's also gonna be able to communicate back up.

[00:09:27] So I'll say new item and I'll pass in the item. And again, we'll pull off the ID and the value, and whether or not it's packed, those are gonna mostly be the defaults in this case. The other thing I'm gonna do real quick though is I'm gonna pass a reference to the store down.

[00:09:43] So now, the list can talk to the individual items, right, by manipulating its own array and the individual items knows what list it's on, right? It can talk back up to the list. And we'll see that become useful in a second. And so, let's just update the individual item.

[00:10:04] That is wrong. This is the problem when you have two things called item. We'll also pass in,
>> Steve Kinney: The list that it's on.