Sending Data from React into MobX

[00:00:00]
>> Steve Kinney: So we can go ahead and we can say that we also need to have this idea of a new item, that we need to create, so actually add one in there. So we'll go ahead and say that as well. So we'll go in here, we'll do this one a little bit differently.

[00:00:16]
>> Steve Kinney: You'll see that this one is a class, and I kinda left this one like that on purpose.
>> Steve Kinney: So we can say, inject, and bring that from MobX, and now, here we can see it a little bit differently with the decorator syntax. Where we can inject that, now that's a prop that is available in here.

[00:00:47]
>> Steve Kinney: Set it to the value.
>> Steve Kinney: The reason I named the name of the item, is cuz I'm very lazy, I named it value, so I could do this.
>> Steve Kinney: Value in that case, cuz that's just gonna be a ephemeral state, right? As we said before, if the global state does not need a thing, you don't need to start every input field, these simple applications may have one, two, three input fields.

[00:01:17]
I think a lot about kind of, the code editor and the design editor that we have, there are a lot of input fields, not all of them matter to the global states. Some of them are temporary things that we're gonna save. So you can still use regular react state in your component.

[00:01:33]
And honestly, when it's only kept in that state, you should. So here we'll say, we got that onSubmit. Actually, we're just gonna do it in here.
>> Steve Kinney: We'll grab that value and we'll say.
>> Steve Kinney: ItemList = this.props. And all we'll say is, itemList.addItem, does anyone remember? To check, the perils of live coding, right?

[00:02:21]
Let's see, individual item. Items. Let's fix a mistake I don't like that we made, we're only adding one item. Cool, so we'll go in here and we'll add an item, honestly with that value. We're just saying, hey, itemList, I'm gonna call one of your methods, can you figure out how to do this with React?

[00:02:42]
Let's go ahead, we did a lot of codes, let's take it for a spin and see where I messed up.
>> Steve Kinney: Boom, there's a little, I have a little dumb error that I have to fix. So you can see that, all I did was mutate effectively, I pushed an item onto the array, and everything was changed.

[00:03:08]
I'll see what that is in a second. But basically, yeah, I just push the thing onto an array, my entire React app changed. I didn't have to do anything, my entire React, other than this input field here, that is just a temporary, ephemeral new item thing, and I should clear that out afterwards.

[00:03:35]
>> Steve Kinney: I just mutate the state, and my entire application reflects it. I'm not, there's no reducers, I mean, there's things that are denoted as an action, but they were just methods, right? The action.bound was just binding it to this. I'm just taking my thing, it's basically the dream that we've, kinda been waiting for.

[00:03:51]
Which I know that one of the questions at the end of this section is, so why don't you use use MobX all the time? We use it for the smaller pieces of it, I'll talk a little bit about why some of the tradeoffs that you need to think about.

[00:04:05]
So I'm a really big fan of it, but there are, obviously with anything, things that you need to consider. So did I bring my iPhone? There it is. That's in item Item.js:6, all right, we'll do with that, I think it's part of the ID. And what if we wanted to toggle one?

[00:04:26]
So let's go into the actual item here. And we'll say that, unchanged for this checkbox.
>> Steve Kinney: I'm gonna console.log the items, so I can deal with that error while at it. We'll console.log it, and we'll say, hey item, when someone clicks the unchanged, why don't you toggle? Toggle, right?

[00:04:55]
We already implemented that, that flips packed to unpacked, that's all handled in our state, we're just saying, hey, toggle.
>> Steve Kinney: Boom, all right, let's deal with that, cannot read property call of undefined. We did console.log it.
>> Steve Kinney: I know what it is. That is literally probably referencing it, so let's take a look, and I'll deal with it momentarily.

[00:05:30]
Our ID, I figured out what the issue was with that input field, in the actual ItemModel, I just need to actually call unique ID. Set step one, we'll deal with the second issue in a second.
>> Steve Kinney: All right, still blowing up, but now my ID is at least correct.

[00:05:50]
You can see that it references the item store, which is great as well. So it's definitely unchanged, let's take a look. So the issue that we had is, toggle is not a getter, it's a function, right? And so, computer properties would use get, the actual actions we don't.

[00:06:12]
We didn't do it on remove, I think we were just, talking and typing, sometimes we make some boo-boos. So I'm just gonna go and, one of the other things I investigated was, does it need to be an anonymous function? It does not, so now we should be able to add it.

[00:06:32]
>> Steve Kinney: And we got, from just defining regular objects with regular methods and just changing properties, we got an awful lot of functionality for free. If we wanted to implement mark all as unpacked, you could do that on the item list, just literally a for loop when you just set all of their packs to false, that's it.

[00:06:58]
[LAUGH] If you wanted to rename one, just change the value on it. We saw that we can wire up these input fields when they change to just changing the packed filter and the unpacked filter. And we have computed arrays that would then be able to filter out that array.

[00:07:20]
At this point, it is simply calling the rest of the methods that we implemented from React, which I'll kinda leave as an exercise for you. But all of the state managing is handled really cleanly, I think, in our actual individual item as well as this kind of item store or item list that we have.

[00:07:37]
That kind of manages the ability of adding one to the list, how it filters and so on and so forth.