List Model MobX Store

[00:00:00]
>> Steve Kinney: What we'll do is, we'll actually kinda implement a version of an application. We saw this application before, when I was kinda going over the things that we're gonna do today, it's not a to do list, it's my packing list. And, you know what, I will defend myself in making a to do list, because I use this app, [LAUGH] I have it stored in local storage.

[00:00:23]
And every time I come out here, I make sure that I bring my toothbrush and. If you turn your head is a coding board like we made before, but just two lists, and things move back and forth between the two of them, and after I get home, I hit the mark, all is unpacked.

[00:00:39]
And they all go back to unpacked, and when it's time to leave again, I try not to forget my deodorant. So we'll kinda begin to implement this. We're going to get a feel for what it's like to work with MobX and our React application. We are gonna use a version with decorators, so I had to use a version of Create React App that was ejected.

[00:01:01]
If you're in control of your own Babel configuration, you can bring in the proposal for decorators. Now, we've talked about the risks here, right? When decorators, if decorators finally ship in ECMAScript. It could be the case that, they are slightly semantically different, and you're gonna have to do some refactoring.

[00:01:26]
In my experience, in the last few years since they've still been in proposal status, they haven't changed that much, but forewarned is forearmed. The idea of functions and higher order functions in JavaScript is never gonna really change. Let's take a look at this app. Right now, it's fine, it doesn't do anything.

[00:01:45]
Eventually we'll have this ability to inject our MobX store, and these are all the components in here. I think the new input field, theoretically, I think has the ability to just hold some temporary state eventually, but pretty straightforward. We're gonna have this ItemModel and an ItemStore. So effectively this is very similar to the plural of items and the singular of a given item.

[00:02:19]
So let's go ahead and let's, we'll need that ItemModel eventually, but let's start fleshing out the store. So it's a regular JavaScript class, it's not really even extending anything. So what are the things? We know that it will have an observable list of items that will start out as an array, that seems good.

[00:02:43]
We know that it will have, in order to be able to filter it, there's a filter field on the packed items and the unpacked items, so we can set that up as well. Observable and we'll say that.
>> Steve Kinney: UnpackedItemsFilter is an empty string.
>> Steve Kinney: And we'll do that for the packed items as well.

[00:03:10]
Cuz what we'll do is, basically generate new arrays based on the content of that filter, where it literally filters through all the items, and see if the name matches what's in there. So we'll kinda get filtering for free, in exactly the way that we would just do it in a regular JavaScript object.

[00:03:26]
So then, we've gotta figure out what our packed items are and our unpacked items are. And we only wanna regenerate this list when that array changes at all. So I can actually say, we make a computer property, and we'll say, get packedItems. And if this feels like just regular JavaScript, that's good.

[00:03:49]
This .items, not just a state nothing, right? This is .item's a filter, the item, and look and see if it's packed
>> Steve Kinney: Cool, all right, so what are unpacked items? Well, they're kind of the opposite of that. But what I'm gonna do is, I could filter for not being packed, but I can also create an API that kinda makes me happy and inspires joy.

[00:04:16]
I can say, unpacked, right? Because that can be a computed property on the item, we just have priorities packed, unpacked. We did this, in the kinda prequel course where we had the valid, invalid, we had to getters to this. So, we can create code that's incredibly readable, and if we wanna see which ones are filtered, a computer a property can rely on another computed property.

[00:04:41]
So we can say, computed, and we'll say, get filteredUnpackedList. Let's do this in the right order, filteredPackedList, and that is simply gonna return, this.packedItems.filter.
>> Steve Kinney: And that'll be, if the item's value includes this.unpackedItemsFilter. So basically, we're kind of building computer properties on top of each other. So we have a list of items, we have the ability to get which ones are packed and which ones are unpacked, we have a string for what value we're searching for, right?

[00:05:30]
And we can begin to build these, so that outside of our JavaScript object, and this is also super easy to unit test, you put some objects in there with some properties, you can write the unit test. And all of our, or you'll all be like, how can we derive from that?

[00:05:45]
So we do the same thing with unpacked. So filtered.UnPackedList, unpacked, this is packed. Cool, good thing I didn't type that separately, cuz I wouldn't have caught that one. Cool, so we have all of that in place, we'll probably, let's just create a few more. And you're gonna see me do something here that I haven't talked about yet, which is this action.bound.

[00:06:14]
And this is effectively, we saw there was an auto bind or a bind this that I joked about before, this will effectively give us that, so when we use it in our React application it knows what this is. This is the same thing, it's doing this.whatever equals this whatever, buying this, we're using arrow functions, so on and so forth.

[00:06:32]
>> Steve Kinney: So we can do a few of these, let's do updatePackedItemsFilter
>> Steve Kinney: And all that is gonna do is, say.
>> Steve Kinney: This.packedItemsFilter equals whatever the new value is.
>> Steve Kinney: This for unpacked as well.
>> Steve Kinney: Cool, and then, it'd be awesome if we could make a simple helper for adding and removing items, right?

[00:07:21]
So we could say, action. We're gonna need to do the item itself action.bound. Let's just start with adding items, let's not worry about removing items just yet, cuz it's, spoiler alert, roughly the same. Add items, whatever that item is. And what I'm gonna do is, I'm gonna leave this out cuz I don't actually have that yet, the ability to create a new item.

[00:07:51]
So we'll just leave that as a kind of placeholder for now. All right, so this is the way of collecting them, it's gonna have an array of items, it can filter them, it can sort them into packed and unpacked. Again, other than a healthy dose of decorators everywhere, you'll notice that it's effectively like a regular JavaScript class.

[00:08:13]
The decorators are the important part, I don't wanna undersell it.