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: Types
slug: types-in-mobx-state-tree
description: Introduction to the types in MobX State Tree
role: "LESSON"
isPublicLesson: false
---

# Types in MobX State Tree

MobX State Tree comes with a lot of built-in types for you to use across all your stores. All of the types can be found within the `types` name space. Types are used to declare model properties' types. This way, we can strongly type our stores and make our code more robust and safe.

## Primitive types

MobX State Tree offers you the following primitive types for you to construct your stores with:

-   `types.string`: Creates a string type property.
-   `types.number`: Creates a floating point number type property.
-   `types.integer`: Creates an integer only number type property.
-   `types.boolean`: Creates a boolean type property.
-   `types.Date`: Creates a Date type property.
-   `types.custom`: Creates a custom primitive type property of your own.

## Complex types

MobX State Tree offers you the following complex types for you to construct your stores with:

-   `types.model(name, properties)`: Creates a "class like" type. This is with what you'll construct your stores with.
-   `types.array(type)`: Creates an array of the specified type. It could be a primitive type or even a model created with `types.model` to create complex lists of models.
-   `types.map(type)`: Creates a map of the specified type. It could be a primitive type or even a model created with `types.model` to create complex maps of models.

## Utility types

MobX State Tree also offers you a lot of built-in utility types to help you get the most out of the library for your application:

-   `types.union(type, type, type...)`: Creates a union of the specified types and MobX State Tree will automatically determine which one of the types is the one used.
-   `types.optional(type, defaultValue, optionalValues)`: Creates an optional type property. If a value is not provided (`undefined`), it will use the `defaultValue` instead. If the `defaultValue` is a function, it will be evaluated and use the returned value as the property value. This could be used to generate IDs or timestamps at creation time.
-   `types.literal(value)`: Creates a literal type where the only possible value is specifically the given value. You can combine this with `types.union` to create an enumeration type.
-   `types.enumeration(name?, options: string[])`: Creates an enumeration type property. This method is a shorthand for a union of string literals.
-   `types.refinement(name, baseType, (snapshot) => boolean)`: Creates a refined type property which will be much more specific than the base type. For instance, you can use `types.refinement(types.string, value => value.length > 3)` to create a type string that can only be longer than 3 characters. Or you might want to create a `types.refinement(types.number, value => value > 10)` to create a type number that will only allow numbers greater than 10.
-   `types.maybe(type)`: Creates a type that's optional and nullable.
-   `types.maybeNull(type)`: Creates a type like `maybe` but uses `null` to represent the absence of value.
-   `types.null`: The actual `null` type.
-   `types.undefined`: The actual `undefined` type.
-   `types.late(() => type)`: Creates a late-type that is used to create recursive or circular types, or even types that are spread over files in a way that circular dependencies could be an issue otherwise.
-   `types.frozen(subType)`: Creates a type from any kind of serializable value that could be both primitive and complex, but assumes that this value is itself immutable and serializable. This type will not be instantiated so it can only be used to check the shape of the data within it.
-   `types.compose(name, type1...typeN)`: Creates a new model type by combining all of the given types passed as arguments to the function call into a new one.
-   `types.reference(target)`: Creates a type property that is a reference to another element of the given type somewhere in the same tree. The `target` reference should have exactly one attribute of the type `identifier`. References are looked up through the entire tree but per type. This is why identifiers need to be unique in the entire tree.
-   `types.safeReference(target)`: Creates a type property like `types.reference` with some subtle differences; it accepts the `undefined` value by default and automatically sets itself to `undefined` (when the parent is a model) and removes itself from arrays and maps when the reference it is pointing to gets detached/destroyed.
-   `types.snapshotProcessor(type, processors)`: runs a pre-process and/or post-process function(s) before and/or after serializing a given type.
