MobX Quick Start Guide

Async actions

Asynchronous programming is pervasive in JavaScript, and MobX fully embraces that idea without adding too much ceremony. Here is a small snippet showing some async code interspersed with MobX state mutation:

class ShoppingCart {    @observable asyncState = '';    @observable.shallow items = [];    @action    async submit() {        this.asyncState = 'pending';        try {            const response = await this.purchaseItems(this.items);            this.asyncState = 'completed'; // modified outside of             action        } catch (ex) {            console.error(ex);            this.asyncState = 'failed'; // modified outside of action        }    }    purchaseItems(items) {        /* ... */        return Promise.resolve({});    }}

Looks normal, like any other async code. This is exactly the point. By default, MobX simply steps aside and ...