asyncFlow: use async/await to build asyncAction

[ZeekoZhu]

Use asyncFlow to create async actions in a typesafe way

Purpose

• typesafe
• use async/await to build async action
• avoid creating exposed "utility" actions

Example

const foo = types.model('Foo', {
    foo: ''
}).actions(self => {
    return {
        asyncOp: asyncFlow(mstAction => async (bar: string) => {
            // use mstAction to schedule an action in flow
            await mstAction(() => self.foo = '123');
            // now the store has been mutated
            console.log('foo: ' + self.foo);
            await mstAction(() => self.foo = self.foo + '123');
            return 3;
        })
    }
});

Implementation

https://gist.github.com/ZeekoZhu/feb561b0e8203e3faf15208f794d5245

[EmilTholin]

Hey @ZeekoZhu!

Very interesting. As an alternative, you can get typesafe asynchronous flows with "async/await" (yield*) without the need for "utility" actions by doing this:

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

type Stuff = { id: string; name: string };

function fetchStuff(): Promise<Stuff[]> {
  return new Promise((resolve) => {
    resolve([
      { id: "1", name: "foo" },
      { id: "2", name: "bar" }
    ]);
  });
}

const Thing = types.model({
  id: types.identifier,
  name: types.string
});

const ThingStore = types
  .model({
    things: types.array(Thing)
  })
  .actions((self) => ({
    fetchThings: flow(function* () {
      // "stuff" is now of type "Stuff[]"!
      const stuff = yield* toGenerator(fetchStuff());
      self.things.replace(stuff);
    })
  }));