Introduction to the newline guide to building a React App with MobX State Tree

Application Overview

State Management on the JavaScript ecosystem

State Management

What is MobX State Tree?

What will you learn in this course?

Will this course be for you?

Introduction

Introduction to the mental model of MobX State Tree

The Tree in MobX State Tree

Introduction to the store model of MobX State Tree

The Store Model

Introduction to the types in MobX State Tree

Types

Introduction to the model actions of MobX State Tree

Model Actions

Introduction to the model views of MobX State Tree

Model Views

Introduction to the store snapshots of MobX State Tree

Snapshots

Identifiers and references of MobX State Tree

Identifiers and References

Asynchronous Actions

Lifecycle Hooks

Concepts

Arrays in MobX State Tree

Maps

Working with nested stores in MobX State Tree

Nesting Stores

Optimistic Updates

Time Travel

Advanced Concepts

Overview of React and MobX State Tree

Combining MobX State Tree with React via Context and a custom Hook

Context and Hooks

Observable

React

Overview

Building Voyager

mobx-state-tree

In this course, we will create a complete React Application with the state management handled by MobX State Tree, a state container system that is built on MobX, a functional reactive state library.

MobX State Tree will give your application a solid structure and foundation for large-scale applications and for small applications that are expected to scale rapidly. In comparison to Redux, MobX State Tree outstands it in performance with much less boilerplate. MobX is one of the most popular Redux alternatives and it's used by companies all over the world, including Netflix, Grow, IBM, DAZN, Baidu, and more.

During this course, you'll learn:

* Types in MobX State Tree.
* How to create the architecture of a centralized store.
* How to mutate the state via actions that could be asynchronous or not, depending on if we need to perform network requests to persist data into a database via GraphQL.
* Understanding snapshots and how we can benefit from them to time-travel if a network request fails.
* Understanding how MobX State Tree makes use of observable properties and observers.
* Leveraging re-renders in your React Application to MobX observers for better performance optimizations.

By the end of this course, you will have the knowledge and skills that it takes to build a real-world, production-level React Application with a State Management with top-notch performance that can scale with ease.

In this course, we'll show you how to build a React App with MobX State Tree.

The newline Guide to Building a React App with MobX State Tree

How to integrate MobX State Tree within your React App

Dealing with asynchronous flows and time travel to preserve state on networking errors

How to create a scalable store using MobX State Tree

---
title: The Store Model
slug: the-model-in-mobx-state-tree
description: Introduction to the store model of MobX State Tree
role: "LESSON"
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/gkgud0myqh
---

# The store model in MobX State Tree

The core feature of MobX State Tree and the most important type is **model**. A model can be used to describe the shape of a store.

MobX State Tree allows you to give the model a name for debugging purposes and it is strongly advised that you do so, so you can easily track possible errors at development time.

The model type takes two arguments:

1.  The debugging name of the model.
2.  The model properties.

## Model description

Lets take a look at a very simple example of a MobX State Tree store

```js { actualFilename=src/model-description.js endChar=181 endLine=8 startChar=0 startLine=1 statedFilename=src/model-description.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-building-a-react-app-with-mobx-state-tree/module_01/lesson_01.02/src/model-description.js }
import { types } from "mobx-state-tree";

const UserStore = types.model("UserStore" /* 1 */, {
  name: types.string, // 2
  lastName: "Casillas", // 3
  age: types.number, // 4
});
```

1.  The debugging name of the store.
2.  A type. In this case we have a `string` type, a simple MST primitive type.
3.  A type. In this case we have provided a string, and MST will infer the type `string` automatically for you.
4.  A type. In this case we have a `number` type, a simple MST primitive type.

MobX State Tree has a large number of types that can be used in many different scenarios; but in this case, for the sake of simplicity, we just use two of the primitive types. We will get into advanced and complex types later on.

## Chainable model

The `types.model` creates a chainable model type where each chained method produces a new type as follows:

-   `.named(name)`: this method clones the current model type but with a new name.
-   `.props(props)`: this method produce a new type based on the current one, and adds or overrides the specified properties.
-   `.actions(self => actions)`: this method produce a new type based on the current one, and adds or overrides the specified action functions.
-   `.views(self => views)`: this method produce a new type based on the current one, and adds or overrides the specified view functions.


Alex Casillas

In this video, we're going to set up MobX Day 3 and MobX

First, we're going to use Yarn to install our dependencies.

Dependencies install, now we see that we have MobX Day 3 5.1.6

and MobX 6.6.1, which both of them are the latest.

We are importing types from the MobX Day 3 package.

After it, we are going to define our modal shape.

The first one being the debugging name of the store.

And the second one is going to be an object

We have last name, which is also a type string.

We use the .create method from the model that we have just created.

We need to pass an object with the default values

that this instance is going to take at initialization time.

Now we're going to take a look at how this instance looks.

We have an object with various properties

which are get us on setters because MobX Day 3 uses proxies

to prevent you from manipulating the state directly.

We also have a name, a last name, and an H.

We can see that we can retrieve values easily just by accessing it

So as you can see, quite simple and straightforward little boilerplate