Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "MobX with React" 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:

Use the mobx-react library to bind your data to React views.

Get Unlimited Access Now

Transcript from the "MobX with React" Lesson

[00:00:02]
>> Steve Kinney: Turns out we just have more decorators. You'll notice if you're eagle eyed, if you look in the upper left corner, you have this observer decorator which effectively wraps the entire component in a higher order component. The pattern's back again. And that wires it up so that if any observable properties change, we re-render the component.

[00:00:29] So this is what it looks like with classes. If you're using stateless functional components, it's just a function. It's just the higher order component pattern rearing its head once again, which is really just the higher order function pattern. Where it takes this thing and basically wraps it in extra functionality.

[00:00:48] And like you could theoretically, you have almost to a certain extent, written a very simple version of this. If we were gonna use the container pattern for earlier in this course, effectively, when the component mounts. You're going to use autorun, these properties. And this is obviously a lot more complicated under the hood.

[00:01:06] But effectively it's just registering an autorun to re-render on any time any of those observables change. And it's wrapping it in a container component. That is, like, you have, like it may look like magic, yeah, just put observable in front of it. But you are almost graduates of this workshop.

[00:01:23] You know how this stuff works. You have written this stuff yourself. And so, it's that same pattern again. And for me, some of the most important parts of this workshop are that pattern, those patterns. And the fact that you can apply it. If there is something where don't have this, you now know the mechanics.

[00:01:39] Connect is effectively the higher order component pattern. This is again, the higher order component pattern. And these patterns are the really useful part, even if we're all using some different library in six months. All right, very cool. So then there's the other part of I want to maybe have a mobx store.

[00:01:58] If I pass one in, I know about it but what about being able, I don't wanna pass stuff down again. We're better than this, I don't wanna get to the point where I'm back in the beginning of this workshop. I'm putting everything in the application component and I'm passing it all around again.

[00:02:11] That's not what I wanna do, I wanna have all the goodness that I just got from redux. So I made container components and used connect.
>> Steve Kinney: So, guess what pattern's back again, provider, mobx-react has a provider component. One thing I wanna point out to you is, if you've used Redux, you say like store equals store, and that's it.

[00:02:38] Because Redux, how many stores are there?
>> Speaker 2: One.
>> Steve Kinney: One, now you can have as many stores as you want again. Right, you can have an item store and a tweet store. And a to-do store. You can have a to-do list, twitter stream packing list app. And you can pass all of those in, and they will be available as different stores that you an inject in there.

[00:02:57] In Redux, we don't think about all that stuff. Because there is just one store, and so we just inject that one store, cool. And then, so okay, I've injected it. It's part of the context. Remember the context from previously? When the provider says the context, all the child components have access to the context that you're not supposed to touch?

[00:03:17] That the library is supposed to handle? So, how do we do that in mobx? If you're using a ECMA super class, you can. And remember this is the new item component, this is one that just theoretically triggers new items or creates them. It doesn't actually listen for anything.

[00:03:34] You can use inject and this'll inject the item store, this will now be this.props.itemstore. So you can inject the store to any component, so now you're not starting at the application and passing all the way down. You're getting that stuff we worked so hard for when we implemented flux.

[00:03:50] Being able to separate our data off in the component hierarchy. And being able to kind of like inject it in from the side. You're able to do that, so this will inject the item store. And you can inject as many stores as you need. So think about it as we used maps state to prompts with Redux.

[00:04:05] This is very similar to like hey, here's the stores that you need, cool. This is a stateless component, I'm just kind of demonstrating that inject actually then takes a function. It's like two higher order component patterns, so we'll inject and then we'll observe. So inject, return the function, observer takes in a component.

[00:04:32] So we first rapid the observer, and then we inject the store into it. And now we have both the ability to automatically update whenever any of that data in the store changes, as well as the ability to have access to the store itself. All right, we're gonna take like a five minute break.

[00:04:52] And then we're gonna jump into an exercise that we're gonna go back and forth. So I'll implement the basic functionality for adding and removing items. Then you'll implement toggling, then I'll implement filtering. And then you'll implement marking all as unpacked. So we're gonna kinda have a little bit of I do some stuff, then I'm gonna hand it over to you.

[00:05:11] Then, I'll do some more stuff. I'll hand it back over to you. We'll kinda go back and forth to reimplementing the application with mobx instead of one of these other patterns. I just need a few minutes to get ready.