Wiring MobX to the React App

[00:00:00]
>> Steve Kinney: And you can kind of like just use this now in your application. So we'll go into the application itself and cool. So we need to actually, do we have a have an index in here? We have an index.js, we need to do some wiring up here. What this is going to look like is effectively that same provider stuff that we've seen before.

[00:00:25]
And so we can say something along the lines of we'll pull in the provider from mobx. Now this is a different one than the one from Redux.
>> Steve Kinney: Mobx react. We'll pull that in, and then we'll wrap the application.
>> Steve Kinney: And the provider. We'll say that the itemList,

[00:01:12]
>> Steve Kinney: Did I export it?
>> Steve Kinney: So we can rename this file item store to/ It doesn't matter, we could pass this in. Now, we don't want to pass in the class, we want to instantiate an item list. So, we'll say item list just [NOISE].
>> Steve Kinney: Cool, so now, it's effectively context aware.

[00:01:58]
Basically any component that needs to know about a given item like these accesses, list of items, we can just inject. Be like, hey, I heard you need the itemList, very cool, here it is, all right? We can inject it into that component. Awesome, so we'll go in, and we'll take a look, application will have it.

[00:02:27]
We don't really need it anywhere in an application. But if we go into application we can see that we wanna show these two lists of items. What we could do is we can make an abstraction over this item, where we can basically say, hey, what I'm going to do with you is, I'm going to show you.

[00:02:51]
I'm going to make a packed items one and an unpacked Items one. And we'll just kind of wrap this idea of an Items component. So we'll say, like PackedItems, and what we'll do is we'll just inject.
>> Steve Kinney: They call it itemsList so itemsList. Because it's a string, you have to kinda get it right which is fun, itemList singular, cool

[00:03:24]
>> Steve Kinney: Didn't do that here, so we'll pass it in. And so we're injecting it, but we saw before, then the component itself needs to be given the observer, right? It is observing the observable. Cool, and that will get injected into it, the item list, right?
>> Steve Kinney: Right, inject and we'll bring in observer

[00:04:04]
>> Steve Kinney: Cool, and we'll go ahead and we'll have that in place. And we'll say hey, what we wanna do is I wanna show you items, right with the title unpacked items
>> Steve Kinney: Right, and this will be, we'll start out, we won't implement the filters just yet. We'll say the items in here are going to be the item list dot unpacked items.

[00:04:42]
>> Steve Kinney: And that syncs the meet the API there. We just need to return this. Right now we could wrap it either way. I'm getting yelled at for something here.
>> Steve Kinney: It wanted a comma instead of a semicolon. Cool and we make another one for the unpacked items. Now I could do this in the application too.

[00:05:12]
>> Steve Kinney: But the nice part about these components is now because I've like abstracted them, they are effectively a higher order component right? They're wrapping around the item. This is supposed to be packed. We'll call this one on pact. We call this one unpacked.
>> Steve Kinney: So packed items. Cool, and so we can kind of put both of these in place.

[00:05:40]
So here we'll say
>> Steve Kinney: Pull in the unpacked items
>> Steve Kinney: You'll notice I don't have to pass any props. Close on the PackedItems, and just use these components where, I can move them around throughout my component hierarchy, it doesn't matter. Which is kind of the dream in this case.