Model Actions
Introduction to the model actions of MobX State Tree
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Building a React App with MobX State Tree course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Building a React App with MobX State Tree, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:27] Hello everyone, welcome to this video. In this video, we will learn about model actions. In MobXState3, models can only modify the properties by dispatching their own actions, or by actions in models higher up in their own tree. Actions are defined by returning an object from the chinaable.actions method. The initializer function is executed per instance, so that the self-argument of the function is always bound to the current instance.
[00:28 - 01:03] Let's extend the previous example by adding actions to the model so we can update the model data as we want. The action method call takes a function. In this case, self is the main and only argument to that function and references the model itself, allowing you to access its properties in other actions within its scope and returning an object literal. We also define an action called updateName that takes a single argument that will be used to update the model's name property. As we can see by the example, a model's data can be changed within actions.
[01:04 - 01:19] If you ever try to modify a model's property or known without using an action, it'll throw an error. There are some things to consider when it comes to model actions. One, model properties or notes cannot be modified without dispatching an action .
[01:20 - 01:33] Otherwise, it'll throw an exception. Two, it's recommended that action arguments are serializable. Three, actions can only modify models that belong to the sub tree on which they are invoked.
[01:34 - 02:27] Four, this cannot be used inside actions. That's why you have the self-argument that makes it safe to pass actions around without any binding issues or having to wrap them in our functions. Now let's play around by updating some properties from the instance. As you can see, after calling the actions that we have just created in the model, we can safely update these properties from the model. Now let's try to break it and see how it behaves. Here, we're trying to pass a number to an action that takes a string as the main argument. And therefore, MobXState 3 will tell us, "Hey, what's up? What are you doing?" This is supposed to be a string here to show you that you cannot directly manipulate the model properties. We're trying to set the name to a new string.
[02:28 - 02:36] And MobXState3 will throw you an error. As you can see, creating actions, piece of cake, see you in the next video.