MobX Quick Start Guide

Models – properties, views, and actions

mobx-state-tree as the name suggests, organizes the state in a tree of models. It's a model-first approach, where each model defines the state that needs to be captured. Defining the model adds the ability to type-check the model assignments at runtime and guard you against inadvertent changes. Combining the runtime checks with the use of a language like TypeScript also gets you compile-time (or rather, design-time) type-safety. With a strictly typed model, mobx-state-tree gives you safe guarantees and ensures the integrity and constraints of your typed-models. This in itself is a huge benefit, especially when dealing with a dynamic language like JavaScript.

Let's put MST into action with a simple model ...