async-machine.js

import { Machine } from "xstate";

function noop() {}

const async = Machine(
  {
    initial: "idle",
    context: {
      trigger: noop,
      onSuccess: noop,
      onError: noop
    },
    states: {
      idle: {
        on: {
          DO: "busy"
        }
      },
      busy: {
        invoke: {
          id: "async",
          src: (context) => context.trigger,
          onDone: {
            target: "success"
          },
          onError: {
            target: "error"
          }
        }
      },
      success: {
        entry: "handleSuccess",
        on: {
          DO: "busy"
        }
      },
      error: {
        entry: "handleError",
        on: {
          DO: "busy"
        }
      }
    }
  },
  {
    actions: {
      handleSuccess(context, event) {
        const { data } = event;

        context.onSuccess(data);
      },
      handleError(context, event) {
        const { data } = event;

        context.onError(data);
      }
    }
  }
);

export default async;