Describe Your Application Domain Using mobx-state-tree(MST) Models

[00:00] Hi there, and welcome to this introduction tutorial to MobX State Tree. MobX State Tree is basically a library that helps you to organize your application states in a very structured manner. Basically, it allows you to create a component model, but for your data.

[00:17] In this tutorial, we will be building a small wish list application, very applicable to the current season. What you can do is add some items to the list of things you wish. You can even get some suggestions.

[00:34] After that, when all the users have entered their lists, you can draw lots. Then you can see which things you have to buy and for whom, so that you can have a great exchange of gifts.

[00:49] This tutorial will be based on the Create React app, especially because it gives us a modern development environment. Later on, we will be looking into our React, but first we will be purely focusing on the data. We'll be starting by generating an initial application.

[01:08] Now our initial application is generated, and we will be adding some dependencies by MobX, MobX React, and MobX State Tree. MobX State Tree is all about models, so we will be starting by opening our recently generated project.

[01:29] Here we have our empty project, and we'll start by adding new folders to contain the models of our application. A model simply describes what your data looks like. Let's start very simple by describing what our data or our model of an item in our wish list looks like.

[01:54] Here is a piece of data that might describe, in JSON, what one single item might look like. These pieces of plain data is what we refer to in MobX State Tree or MST terms as snapshots. With that, we can start describing the shape of our data.

[02:17] We're going to model an object. An object has a few properties. You might know that this is very similar to how, for example, prop types work in React. Each item has a name, which is a string. It has a price, which is a number.

[02:42] It has an image, which is also a string, but since it's not always set, we want to define that this piece of information can be skipped in our data. We can mark it as optional. We say if it's not available in the snapshot, in the data, then just use an empty string.

[03:08] We can write this more efficiently by just saying this field defaults to an empty string, and MST will infer that to being an optional string.

[03:20] With that, we can already create a first test. Let's set up a simple test suite. Since Create React app comes already with just built in and preconfigured, it's pretty easy to get started with testing. In this file, we export the definition of our wish list item. Then, in our test, we can just import it.

[03:47] Now we can describe a simple test that says it can create an instance of a model. We use the type we just created and call the create model on it, and its create method expects a snapshot. We can put in this piece of data we have over here, and then we can create some assertions on it.

[04:13] This might look like a very boring test to you so far, but let's try it. We see that it nicely passes the test. However, we could change the test a bit. We could, for example, skip that whole image field. If it's not set, then we expect it to become an empty string.

[04:39] Because we defined the shape of our data, MobX State Tree can actually verify the data we pass in. If we would have wrongly spelled the price, we would be getting an exception. It says, if half price, the value is undefined and not assignable.

[05:00] Of course, this is not very interesting so far. You'll understand that this data model doesn't suffice for our application. Actually, what we need is a list of these items, so let's go back to our model definition and let's also start to define the type of our wish list.

[05:21] The wish list which powers this application is a model. It has items, and these items are an array of the type we just defined earlier. What we now did is we built a type composition, so wish list is expressed in terms of wish list items.

[05:40] Of course, we can define this one as optional, as well and say, if it's not provided in the data when we instantiate this model, it's initialized with an empty array.

[05:53] Let's put this to the test again. We still have our test running here. Now we know for sure that we can create a wish list. The wish list consists of items, and we can already provide the data for some of these items by just copy/pasting this.

[06:20] Now we are pretty sure that the amount of items in this list is zero. No, of course not. It is one, because we provided an initial piece of data to the model instance. The list is just a normal JavaScript object, so we can navigate to the list we constructed. It has items, and items have a price.

[06:47] What we did so far is that we just transformed JSON into model instances. We will see how powerful this is when we move on.