MobX Quick Start Guide

Managing the async action

Things are more interesting with the async search() action. Our UI needs to know the exact state of the operation at any point in time. For that, we have the observable field: status, that keeps track of the operation state. It starts with the empty state initially and goes to pending at the beginning of the operation. Once the operation completes, it can either be in the completed or failed state. You can see this in the code, as follows:

class BookSearchStore {    @observable term = '';    @observable status = '';    @observable.shallow results = [];    @observable totalCount = 0;    /* ... */    @action.bound    async search() {        try {            this.status = 'pending';            const result = await searchBooks(this.term);            runInAction(() => {                this.