Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 983 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Use MobX actions to change and guard state

3:01 React lesson by

This lesson explains how actions can be used to control and modify the state of your application. They help you to structure your code base and integrate well with the MobX React Devtools. Actions automatically create transactions, which group changes together.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

This lesson explains how actions can be used to control and modify the state of your application. They help you to structure your code base and integrate well with the MobX React Devtools. Actions automatically create transactions, which group changes together.

Avatar
Anton Telesh

Well, it's all cool. But can you share any articles on how the change detection works underneath? Because now it looks like a magic. And I don't like magic in programming.

Avatar
Michel Weststrate

That question is simple answered, there is no change detection :) Only change notification. For a global idea what MobX reacts to check: https://mobxjs.github.io/mobx/best/react.html. The derivation algorithm is explained here: https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254 and also in my recent ruhrjs talk (not yet published), but slides can be found here: http://magixmobx.surge.sh

In reply to Anton Telesh

Actions are the fourth concept in MobX. In essence, any piece of code that tries to alter a state is an action. For example, if you modify the state in the console, we perform an action. Actions can be implicit and explicit.

If you modify the state in the console, we implicitly perform an action. To clearly restrict your code base and to avoid accidentally changing states, MobX provides the means to explicitly mark in your code where your actions live.

Let's start by extending our temperature class with a method to change the units of the temperature. On that method, we put the action decorator to indicate that this method is an action that will modify a state. Now we can use this method to change the unit of the temperature.

As usually, this nicely updates our view. Actions are the start of anything that happens. Actions modify a state, which ultimately leads to reactions. With actions, we have closed the circle of state management.

We have now clearly indicated in our code that the setUnit method is intended to modify a state. Actions do more than just that. Remember that MobX always runs all derivations synchronously. Let's modify our state again from the console.

We perform two modifications at once. What we see is that MobX recalculates the temperature for both modifications. It runs them twice. For that, you can group your changes by using transactions.

You can forget about transactions already because actions will automatically apply them. Let's try that by introducing two more actions, one to update the temperature, and one to update both the units and the temperature.

If we invoke this action, you see that the transaction is applied because the temperature is recalculated only once. Two more things about actions. First of all, if we decorate all of our methods that modify state, we can forbid all our attempts to modify the state so that you always modify the state in a confined area. This can be done by using MobX in strict mode.

If we now try to change the state directly from the console, an exception is thrown. We should use actions to modify a state. Secondly, actions can be named. That is really nice because those names show up in the MobX dev tools, if we enable those, and in the Spy API, which is the API behind the dev tools.

If we enable the change log in the dev tools, we can nicely see our actions being logged to the console. We see with which arguments our actions are invoked, we see which state is modified, and we see which reactions are triggered in response to those state changes.

That concludes the concept of actions. They communicate the intent to move our state, and they allow you to control where a state is allowed to be modified.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?