Multiple onDone clauses with guard in invoke need to complete the same assign() function, how to do only one assign()?

[eclecticjohny]

invoke: {
  id: 'coolPromiseActor',
  src: 'coolPromiseActor',
  onDone: [
    {
      guard: 'coolGuard', //this guard relies on the status as well which I get back from the invoked promise actor
      target: 'anotherPlace',
      actions: [
        assign({
          status: ({ event }) => event.output.status;
        }),
      ],
    },
    {
      target: 'nextPlace',
      actions: [
        assign({
          status: ({ event }) => event.output.status,
        }),
      ],
    }
  ],

As shown in the example I have an invoke in a state that could result in two different onDone functions being called. In either case, I need to set the status on the context to the resulting output. The first clause has a guard that depends on this status being set. It seemed odd to create a state just to handle this routing to a target based on the status after assigning it. Is there a better way/pattern that I am missing in the examples repo or documentation?

[davidkpiano]

The statechart definition does not (yet?) support "do this action, and then decide what to do", but it'd be interesting to think what that would look like.

But also, if you think about this like a flowchart, this action would go on some explicit "diamond" (choice) state node, so it actually feels natural to have a "choice node" where this action lives that always transitions to the right state based on some condition.

[eclecticjohny]

Thank you. I was able to use this mental model to translate my state machine to the following, does it follow what you were laying out here?:

invoke: {
  id: 'coolPromiseActor',
  src: 'coolPromiseActor',
  onDone: {
    actions: [
      assign({
        status: ({ event }) => event.output.status;
      }),
    ],
  },
  always: [
    {
      guard: 'coolGuard', // one status does this
      target: 'anotherPlace',
    },
    {
      guard: 'anotherCoolGuard', // all other statuses do this
      target: 'nextPlace',
    }
  ],

[davidkpiano]

More like this:

import { setup } from "xstate";

export const machine = setup({
  types: {
    context: {} as {},
  },
  actions: {
    "assign to status": function ({ context, event }, params) {
      // Add your action code here
      // ...
    },
  },
  actors: {
    "some task": createMachine({
      /* ... */
    }),
  },
  guards: {
    someGuard: function ({ context, event }) {
      // Add your guard condition here
      return true;
    },
  },
  schemas: {
    events: {
      "": {
        type: "object",
        properties: {},
      },
    },
  },
}).createMachine({
  context: {},
  id: "Untitled",
  initial: "Do some task",
  states: {
    "Do some task": {
      invoke: {
        input: {},
        onDone: {
          target: "Choice state",
        },
        src: "some task",
      },
    },
    "Choice state": {
      always: [
        {
          target: "State A",
          guard: {
            type: "someGuard",
          },
        },
        {
          target: "State B",
        },
      ],
      entry: {
        type: "assign to status",
      },
    },
    "State A": {},
    "State B": {},
  },
});

[eclecticjohny]

Ahh, I gotcha. So, there is an explicit choice state. That makes sense. The only real last bit of trouble I think I have then here is how do I get the result of the PromiseActor, which is the status I needed to retrieve asynchronously, down to the "Choice state" to assign it to the context?

[davidkpiano]

onDone: {
  actions: assign({
    result: ({ event }) => event.output
  }),
  target: 'Choice state'
}