MobX Quick Start Guide

Wrapping with runInAction()

The way to circumvent this problem is to use a utility function provided by MobX, called runInAction(). This is a handy function that takes in a mutating-function and executes it inside an action(). In the following code, you can see the use of runInAction() to wrap the mutations:

import { action, observable, configure, runInAction } from 'mobx';configure({ enforceActions: 'strict' });class ShoppingCart {    @observable asyncState = '';    @observable.shallow items = [];    @action    async submit() {        this.asyncState = 'pending';        try {            const response = await this.purchaseItems(this.items);            runInAction(() => {                this.asyncState = 'completed';            });        } catch (ex) {            console.error(ex);            runInAction(() => {                this.asyncState = 'failed' ...