Item Model MobX Store

[00:00:00]
>> Steve Kinney: Right, so what are the properties here? Kind of a little bit of a hack is to say everything that we're gonna need up top.
>> Steve Kinney: And so I'm actually gonna keep a reference to the store, right? So I can say hey, item, right what item list are you on?

[00:00:21]
If I need to do the reference back up, cuz it's all, instead of having these data structures that we have to navigate, this can just point to the other object. So I can say itemStore, go through the items, find an item, and take that individual item, say hey, point back up to your item list.

[00:00:37]
And it's just somewhat object oriented programming at this point. And things can just point to each other, which is pretty cool. And so we'll have an observable,
>> Steve Kinney: Value. That maybe by default is, I don't know an empty string just in case.
>> Steve Kinney: And an observable whether or not it's packed.

[00:01:08]
And let's say that's if you just added it to the list, I'm all about the person who adds a thing that you already did to your to do list to feel important for the day. But let's assume that if you're adding it to your packing list, maybe you haven't packed it yet, cuz why else did you do this?

[00:01:21]
Cool, and we can give it a constructor, cuz we're gonna wanna set some of this up at the time. And we'll say, whatever the value is, I have lodash's unique ID in here. So we'll say, sure, we can just effectively do that up here.
>> Steve Kinney: Right, so take the value, packed is gonna default to false, this should be fine.

[00:01:47]
So when they create it, we'll allow them to also set the value there, we'll say this.value equals value. All right, so what are the computer properties here? Well, we know that we use this unpacked before, right? So we need to just basically, and we can compute the whether or not it's unpacked by whether or not it's packed.

[00:02:08]
Right so we can say computed unpacked
>> Steve Kinney: We'll just return not, the opposite of this.packed. And we can also give it a nice method for toggling. So we'll say action.bound, cuz that's easier than figuring out whether it's packed and switching it to the opposite. We'll just abstract that away and we'll say the toggle is,

[00:02:47]
>> Steve Kinney: Flip it to the opposite of whatever it was. All right, so if it's packed it will become unpacked
>> Steve Kinney: Cool, and we could do another one for remove. Cuz remove is a little bit tricky. We need to, when we say, hey, item, I need to remove you.

[00:03:07]
It's actually, what does the item itself do? It's like, I don't know. Basically it has to tell the item list that it needs to be removed. Right, so we can actually, we can implement this one. We might not wire it up all the way. But we can say action.bound, I think it very nicely shows why I like [INAUDIBLE] so much.

[00:03:29]
>> Steve Kinney: So go back up to the actual store. Or list in this case, either one, I think I've called it a store. Yeah, we'll call it a list.
>> Steve Kinney: Cool, and we'll change this construct a little bit.
>> Steve Kinney: We'll pass a reference to the list when we create the object, right.

[00:04:00]
So we'll create the object, we'll say hey, this is what the item is. Also, here's a pointer back up to the list itself, of when you need to remove yourself. So we'll say this.list.removeItem, and we'll just say, this
>> Speaker 2: Hey Steve.
>> Steve Kinney: Yeah.
>> Speaker 2: So I feel like I'm getting some of the observables, but I'm not getting the action.bound one.

[00:04:25]
Can you explain that?
>> Steve Kinney: Yeah, so that's effectively when we use it in our react application, how we lose track of this on the event loop. Right? And so normally, you'd have to bind it, this.change equals this.chang.bindThis. So it's effectively, this decorator is automatically doing that binding to the current object so that we don't have to do it in our React application at all.