Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Solution: Provide and Inject ItemList" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Injecting the ItemList into the application and components.

Get Unlimited Access Now

Transcript from the "Solution: Provide and Inject ItemList" Lesson

[00:00:05]
>> Steve Kinney: Cool. All right so we have these items. We have an item list.
>> Speaker 2: Is that list call list?
>> Steve Kinney: Should be list, thank you. It was this from up a level. So we have an item list, we can add items to it, we can filter it automatically.

[00:00:24] Next thing we wanna do is we wanna hook it up to our UI, right? Anyone remember what the first thing I wanna do is?
>> Speaker 2: Inject?
>> Steve Kinney: Yeah, I need to inject, I need to do something before I can inject. But your gut is right. What's that?
>> Speaker 2: Observer?

[00:00:45]
>> Steve Kinney: Observer, what's that?
>> Speaker 2: Import MobX into index?
>> Steve Kinney: I need to import MobX, I need to grab the provider.
>> Speaker 2: Yeah.
>> Steve Kinney: Right, the provider is gonna be the one to allow, I can't inject the store unless I have a provider. Your senses were all correct, but there was one extra nuance there.

[00:01:00] So we'll pull that open and I don't really need to create like a whole store file in this case because there's not really a lot to do here. I’ll just say import Provider from 'mobx-react'. And then, I need to wrap it.
>> Steve Kinney: Let's say provider.
>> Steve Kinney: Application. Close the provider.

[00:01:39]
>> Steve Kinney: Cool? Now the Provider should probably provide something. So item list is a class we just need an instance of it, so let's bring that in as well.
>> Steve Kinney: Did I call it, I called it models. I think the React stores are still in there, I was like, why'd I call it a store?

[00:02:23]
>> Steve Kinney: Cool, so we'll grab the itemList and we'll just make a new one.
>> Steve Kinney: And we'll provide it in there as itemList.
>> Steve Kinney: You can call it whatever you want. That's just gonna be what it's available when we go to inject it. All right, neat. So we're gonna kind of keep things a little bit deliberately simple here.

[00:02:53] I can start breaking out files, and all those kind of things. But what I'm gonna do is, I'm gonna do a lot of this in Application.js. And at one point I will break out a branch, and I'll push it up, so we can see where we are. All right, so I don't need all this default state anymore.

[00:03:13]
>> Steve Kinney: So we'll get rid of the idea of state in this case, in the actual application. I don't need to do all of this anymore because the actual models can handle that themselves. So all this code can go away.
>> Steve Kinney: This code can pretty much all go away.

[00:03:33] I'm gonna get rid of the countdown for now and,
>> Steve Kinney: We'll put a no-op in here. We'll re-implement this momentarily. And I'm gonna pull these two lists out.
>> Steve Kinney: We'll also take this out for a second.
>> Steve Kinney: Cool.
>> Steve Kinney: So cuz we'll be able to inject all this, we don't need to start the application and we pass it down.

[00:04:09] We can inject it to components that need it. So what I wanna do, is I wanna have a packed items component and I want to have an unpacked items component, that I can put in there. So what we'll do is we'll pull up this items one and we'll use that as kind of a base in this case.

[00:04:26] Again I would probably want to pull this into its own file right now. But just for clarity, I'm keeping everything in one place and not jumping around between things. I'm going to say PackedItems. I need to pull in,
>> Steve Kinney: An observer. These are from MobX React, these are not MobX specific.

[00:04:53] MobX can be used with anything you want. It does not have to be used with React, but there are React bindings for it and that is in the mobx-react library. So here we'll say inject and we wanna inject the itemList and that's going to then take a component.

[00:05:12] And we wanna also observe, because we're going to want to have access to the store and then we're gonna want to watch it change and re-render. So I'm gonna just give myself a new line here.
>> Steve Kinney: And that will get passed in as a prop.
>> Steve Kinney: Inject the itemList and out will come,

[00:05:39]
>> Steve Kinney: This presentational component.
>> Steve Kinney: That's gonna change a little bit here. One, we'll call it Packed Items, because I copied the wrong one. And this one will start out with being itemList.packedItems. And really we don't need any of this,
>> Steve Kinney: At this point, we should good in that case.

[00:06:06] And this should be enough for me right now, just looking, I got some squiggly's here.
>> Steve Kinney: Print the little rainbow parentheses, best Visual Studio code plugin ever. Cool, and let's just throw in the,
>> Steve Kinney: PackedItems component, which is now totally self contained. It doesn't need anything that says it's getting the itemsList injected and it's ready to rock.

[00:06:40] Let's do the same thing with UnpackedItems real quick.
>> Steve Kinney: Right, and whenever those lists change, these will be automatically re-rendered. So we'll go ahead,
>> Steve Kinney: We'll say, UnpackedItems. What's that?
>> Speaker 2: In 24, I don't think it's uppercase, Unpacked, is it?
>> Steve Kinney: Unpacked.
>> Speaker 2: 24.
>> Steve Kinney: 24, nope, you caught me.

[00:07:23] I already had that, so I think it was autocomplete. Cool. So here we'll get rid of that other one and this application component is definitely getting simpler. So we use both of these. The only thing that we really need to see any of this in action is we're probably going to want to be able to add one.

[00:07:46] So let's go ahead, we'll save this real quick, it probably doesn't work, I'm not even gonna look in the browser real quick. Let's go ahead and we'll look at this new item over here.
>> Steve Kinney: So NewItem, this is more of a regular class. Let's play around with that one, I think it's interesting to see.

[00:08:05] We'll import
>> Steve Kinney: Inject from mobx-react. And we can actually put it right up here.
>> Steve Kinney: Inject the ItemList. This is that ephemeral state that we don't necessarily need to keep in the store. So I'm gonna leave that.
>> Steve Kinney: Handle change though, we don't want to cross the handle change with the submit, we don't want to call set state anymore.

[00:08:40] We wanna be able to say,
>> Steve Kinney: Well I just add it to the store, and we have that item method so we can do that.
>> Steve Kinney: Hold off the props.
>> Steve Kinney: And what we'll just do is we'll say that we wanna do itemList,
>> Steve Kinney: itemList.addItem.
>> Steve Kinney: I will give it, the value is, we have it up here actually so.

[00:09:29]
>> Steve Kinney: And that's it. We have the store, the store will add the item to the array, that will trigger the re-render, and sparing a live coding boo-boo.
>> Speaker 2: Really quick, your injection string at the top
>> Steve Kinney: Yes.
>> Speaker 2: Is that case, the case on that?
>> Steve Kinney: Thank you, [LAUGH] you saved me.

[00:10:01]
>> Steve Kinney: All right, let's start it up
>> Steve Kinney: We'll switch out the other app with this one.
>> Steve Kinney: It cannot find module item, so that's fine. Get rid of that calculate time left.
>> Steve Kinney: We pulled some stuff out, so.
>> Steve Kinney: ItemList in models, I think I have a lower case I on there by accident.

[00:10:55]
>> Steve Kinney: Yeah.
>> Steve Kinney: I gotta prevent that default.
>> Steve Kinney: Now I'm in charge of that. Since I had the on submit preventing the default, but I ripped that out and I just do it immediately. So I am now, that's on my shoulders, so I'll just quickly say,