Transient transition that sets a value only on condition passing

Question

Take the following code:

const isWarning = () => { ... }
const setWarning = () => { ... }

const machine = Machine({
  initial: "foo",
  context: {
    warning: null
  },
  states: {
    foo: {
      on: {
        "": [
          target: "bar",
          action: "setWarning",
          cond: "isWarning",
        ]
      }
    },
    bar: {
      on: {
        FOO: "foo,
      }
    }
  }
}, {
  actions: {
    setWarning
  }
  guards: {
    isWarning
  }
});

Is this the best way to go to "bar" and set a warning based on some quantitative data in "foo"?

score 1 · Accepted Answer · answered Jan 09 '20 at 14:17

Given the posted code example, I am not sure what you mean by "quantitative data in foo". Data relevant for machine's behavior can be stored in machine's context or state's meta property. For getting into bar state and set a warning you might need something like:


    const sm = Machine({
      initial: 'baz',
      context: { wasWarned: false },
      on: {
        'WARNING': {
            target: 'bar',
            action: 'setWarning'     
        }
      },
      states: {
        baz: {},
        bar: {}
      }  
    }, {
      actions: {
        setWarning: assign({ warning: true })
      }
    })

This means: When machine gets 'WARNING' event, go into bar state AND immediately, before anything else update the context.

Actions are not immediately triggered. Instead, the State object returned from machine.transition(...) will declaratively provide an array of .actions that an interpreter can then execute.

The transition will be enabled after the guards are passed.

Other code example that might prove useful depending on what you want to achieve:


const sm = Machine({
      initial: 'pending',
      context: { wasWarned: null },
      states: {
        pending: {
          on: {
            '': [
             {target: 'bar', cond:'wasWarned'},
             {target: 'baz', cond: 'otherCond'} 
            ]
          }
        },
        bar: {},
        baz: {}
      },
      guards: {
        wasWarned: (ctx) => ctx.wasWarned
      }
    })

Transient transition that sets a value only on condition passing

1 Answers1