This course has been updated! We now recommend you take the State Management with Redux & MobX course.

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

MobX is a library that is reactive to easily reflect model state in the UI.

Get Unlimited Access Now

Transcript from the "Introduction to MobX" Lesson

>> Steve: We've been doing a lot to manage state right? We've been constructing some mutable state trees and creating these actions and then creating these action creators and then throwing the immutable state tree and the action to a reducer and producing a new state. Whatever happened to just changing stuff?

[00:00:22] Remember changing stuff? It was pretty great! If you wanted something to be different, you pushed something onto an array or you set the text to something else, right? It was a pretty wonderful thing here. What if we could just add a thing, change the text to something and have that change in our UI?

[00:00:41] Like, that would be great to not have to jump through all of these hoops. And we'll talk a little bit later, how there's actually tradeoffs, which is a common theme. Turns out everything involves tradeoffs, there are some times where this other thing is better. But yeah, so a primary tenet of MobX is that you can store state in a simple data structure.

[00:00:59] You can use classes. Right not even simple JavaScript objects. But you'd have a class that has methods that can manipulate the state. You can do all those things. From one object to running programming was cool, and you can just change things and you will be able to render it and re render your user interface with that.

[00:01:16] So we are gonna do something very similar to what we did with redux, and we are gonna kind of play with it in isolation for a bit. So I've got and I've got super-basic-mobx.
>> Steve: I'll pause for one second.
>> Steve: So let's take a look at what we have here, which is this looks like the person class that we had before, but you'll notice a few things.

[00:02:02] I have these decorators that have been pulled in from the MobX library. This one's called observable, and we decorate first name with it, and we decorate last name with it. And now it is wrapped, these properties, in what we'll take a much deeper look at in a second.

[00:02:20] And, then we have this other one called computed, alright, which we are wrapping around that computed property. And, what you will see here, is that this is again a get statement. But this will actually be regenerated, like, we will be notified whenever first name and last name changes.

[00:02:39] And what can we do with those notifications when things change we could re-render the UI. We could tell react that things have changed. We don't actually even need to tell react anything. But the problem right now with regular objects, if I just took a person JavaScript object and I instantiated it, and I passed it to a view, and I started changing properties on it, is that we never really know when that object changes, right we can mutate state and like react would not know it's like still the same object in memory, like nothings changed here.

[00:03:13] And like, it's really hard to do anything, but when we have observable, all of a sudden we can know when stuff changes. Effectively what observable gives us is it registers events, to say hey I changed. Someone was saying something to me, I changed. You might wanna re-render some things.

[00:03:29] So I can make a new person of me this time. I can even just have an observable string and
>> Steve: Check this out. So I have this little method here called render which just takes the document body and sets its inter text. So you can see the name, the person's full name, you'll notice I am not using the parenthesis there as well as some quote that is just a string.

[00:03:57] And then this is a method from outbacks called autorun Right? An autorun is triggered when ever a property that we're observing changes. So, in this case that is the first name and last name on any person object that we obstantiate, in this case, me. It is also this particular string that we wrapped in the observable function, right?

[00:04:19] And so, this observable function here Is slightly different but effectively the same as this, right and we will actually see it is a second. So here I've got, it is rendering to the page and it will re-render whenever it changes. You are like okay, cool so I put a action on a button or something like that right This is just a console, no big deal.

>> Steve: The page changed. I just literally pulled an object and re-assigned the first name. The render is looking for the full name, right, so somehow it knew. Full name got recomputed, because first name changed. That triggered auto run, there's no react in this code. This is like literally document.body.innertext.

[00:05:14] And all of a sudden, I could theoretically build an entire pizza calculator in here, or whatever, and re-render the entire page whenever something changes.
>> Steve: I can say quote. Now quote's a little trickier because objects have references, and we can mutate them. Usually with strings, they're immutable, so we just replace them.

[00:05:36] So this won't actually work,
>> Steve: Unfortunately I'm not gonna do it, just trust me that nothing will happen, we'll still get the old one. But with the quote, because we can't do this with strings and numbers, cuz they're not actually objects, despite the fact that you think they have methods.

[00:05:56] We could do quote.set.
>> Steve: And that automatically changes on the page, and we will render. Right, so this is a really powerful idea, this is taking like the way we normally used to just dealing with like objects and things in regular programming before UIs got very hard. [LAUGH] And as we change stuff, we can trigger things to happen.