[MST] Defining Asynchronous Processes Using Flow

In real life scenarios, many operations on our data are asynchronous. For example, because additional recourses need to get fetched. MST has first class support for asynchronous actions. We will start with a naively implemented async process, and work through async / await towards MST flows and generators.

In this lesson, you will learn

• That async process is painful if they need to respect the ‘only actions can modify‘ semantics of MST
• Flows are the idiomatic way to describe async processes in MST
• Flows are robust; they make it possible to get full control over the lifecycle of a process

The whole point is to using ‘flow( function* generatorFn() => {})‘ to fix some limitation.

import { types, flow } from "mobx-state-tree"

import { WishList } from "./WishList"

const User = types
    .model({
        id: types.string,
        name: types.string,
        gender: types.enumeration("gender", ["m", "f"]),
        wishList: types.optional(WishList, {})
    })
    .actions(self => ({
        getSuggestions: flow(function* getSuggestions() {
            const response = yield window.fetch(`http://localhost:3001/suggestions_${self.gender}`)
            self.wishList.items.push(...(yield response.json()))
        })
    }))

export const Group = types.model({
    users: types.map(User) // similar to object entities
})