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

Looking at observables, actions and derivations in MobX.

Get Unlimited Access Now

Transcript from the "Four components of MobX" Lesson

[00:00:03]
>> Steve Kinney: So there are fourish major concepts to MobX. And it's really, there's three concepts. But the third one has two, so fourish. You can count three. You can count five, I'm gonna call it four. You have observable state. You have actions, which are anything that change that state.

[00:00:24] You have computed properties which will, they're usually like they're lazy. So like you don't actually do that computation until you call last name, unless you're watching for last name and then that won't change. It won't be recomputed, unless first name or last name changes. If first name and last name changes, we now know that the full name is dirty and we have to like recompute it.

[00:00:45] But if it doesn't change like, it will memorize that and you will just get like hey, this is based on first name last name. If those things haven't changed, then everything should be good and then reactions. Reactions are side effects. That was what we do with auto-run. That was a reaction.

[00:01:04] I changed parts of that object. And then all of a sudden, the DOM rerendered or like I replaced the inner text of a document body. That's obviously a side effect. And again, side effects are what can trigger components to rerender. Side effects are like effectively what are able to, we can change this object.

[00:01:22] It can be isolated, but then the UI can change based on the object changing. So computed properties update their value based on observable data. Reactions produce side effect. And so it is an action here would just be like add guest is technically an action and I can annotate that with a add guest.

[00:01:44] It's an action whether you annotate it or not. There is one reason you will see me annotating it when we get to doing this with react, but I will make you wait. But here is a version of pizza calculator that would use observable and you can see that we are observing the number of people, the slices per person.

[00:02:03] And now, I've added a new metric which is slices per pie. In case you live in one of those weird places that cuts it strange like six or ten, that's not cool. It's a square pie, I don't know. I don't wanna get into this. It gets me very angry, I'm from New York.

[00:02:19] So we have these observable pieces of data and we have these computed versions and like those won't get recomputed, unless you need to, unless you change any one of those underlying values. And then add guest as an action, which will change the number of people which will recompute both of those.

[00:02:39] Because if you look at pies needed, that relies on slicesNeeded. What does slicesNeeded rely on? Number of people. You can actually omit the action notation. But again, I'll tell you why in a second you might want it. Originally, that was for documenting. But like I think it will have some special uses.

[00:02:59] I would recommend that you use it.