How to make sure an action fires before continuing with a transition?

[HerbCaudill]

Suppose we have a machine that's started with a START event, which has a property called option that can have two values, 1 and 2. At some point we want to use the value of option to conditionally transfer to state one or two.

So we make an action called processStart to store the value of option in context,

actions: {
  processStart: (context, event) => {
    context.option = event.option
  },
},

and we call that when we get a START event.

on: {
  START: {
    actions: 'processStart',
    target: 'initializing',
  },
},

Then the initializing state conditionally transitions to one or two

initializing: {
  always: [
    {
      cond: 'optionIsOne',
      target: 'one',
    },
    {
      cond: 'optionIsTwo',
      target: 'two',
    },
    {
      // invalid option
      target: 'failure',
    },
  ],
}

using guards that just check the value of context.option:

guards: {
  optionIsOne: (context) => {
    return context.option === 1
  },
  optionIsTwo: (context) => {
    return context.option === 2
  },
},

What happens is that the guards are called before processStart is called:

Transition: inactive (Event: xstate.init) 
checking for option 1 (option=undefined)       🡐 I would expect these guards...
checking for option 2 (option=undefined)       🡐 
processStart (option=2)                        🡐 to be checked *after* the start event is processed
failure 
Transition: failure (Event: START) 

How can I get the information from that initial payload onto context before the guards run?

I've made a working example here: https://codesandbox.io/s/xtate-conditions-before-actions-qvebh?file=/src/index.js

[HerbCaudill]

Note: In the example above, I realize that I could just bring the logic from initializing into the START handler, like this...

on: {
  START: [
    {
      cond: 'optionIsOne',
      actions: 'processStart',
      target: 'one',
    },
    {
      cond: 'optionIsTwo',
      actions: 'processStart',
      target: 'two',
    },
    {
      // invalid option value
      target: 'failure',
    },
  ],
},

... and in the guards, examine event.option instead of context.option.

My actual situation is a bit more complicated, so FWIW I've created a second CodeSandbox that's more like the real thing: https://codesandbox.io/s/xtate-conditions-before-actions-2-oxdbs?file=/src/index.js

In this example, we get two properties with the START event: option (1 or 2), and auth (true or false). From the one state, we want to conditionally transition to authenticated or notAuthenticated depending on the value of auth.

one: {
  always: [
    {
      cond: 'isAuthenticated',
      target: 'authenticated',
    },
    {
      cond: 'isNotAuthenticated',
      target: 'notAuthenticated',
    },
    {
      // invalid auth value
      target: 'failure',
    },
  ],
},
authenticated: {},
notAuthenticated: {},

But by the time we get to the isAuthenticated/isNotAuthenticated guards, (a) the processStart action still hasn't fired, so auth is not on context; and (b) we no longer have access to the HELLO event payload, because that event has been replaced with an empty-string event, {type: ''}.

Transition: inactive (Event: xstate.init) 
optionIsOne? (option=1) 
isAuthenticated? (event.auth=undefined, context.auth=undefined) 
isNotAuthenticated? (event.auth=undefined, context.auth=undefined) 
processStart (option=1)                                                      🡐 too late
one 
failure 
Transition: failure (Event: START) 

[HerbCaudill]

I guess one way around always's eagerness would be to replace it with after: 0.

one: {
  after: {
    0: [
      {
        cond: 'isAuthenticated',
        target: 'authenticated',
      },
     // ...
    ],
  },

This works, but feels wrong. 🤒

Transition: inactive (Event: xstate.init) 
optionIsOne? (option=1) 
processStart (option=1, auth=true)              🡐 without `always`, this happens where you'd expect
one 
Transition: one (Event: START) 
isAuthenticated? (event.auth=undefined, context.auth=true) 
authenticated 👍👍 
Transition: authenticated (Event: xstate.after(0)#machine.one) 

https://codesandbox.io/s/xtate-conditions-before-actions-2a-vd67s?file=/src/index.js

[Andarist]

Note that you should always use assign action to manipulate the context value and if you would do this then things would work as expected for you.

That being said - the order in which core and custom actions are called is a known issue right now. We are aware of it and I hope to fix this in the next major version.

[HerbCaudill]

Aha - I didn't understand that about assign.

For completeness, here's a working CodeSandbox. https://codesandbox.io/s/xtate-conditions-before-actions-2b-gkcep?file=/src/index.js