State Management with Redux & MobX List Model MobX Store
Transcript from the "List Model MobX Store" Lesson
>> 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: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: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: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: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.
>> 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:08:13] The decorators are the important part, I don't wanna undersell it.