zoukankan      html  css  js  c++  java
  • [XState] Conditionally Transition to States with Guards in XState

    Not all transitions should be taken immediately. Occasionally, we would like to conditionally take a transition. We do this through the use of "guards". A "guard" is a predicate function (a function that returns a boolean) that is set on a transition object's cond property (short for "conditional").

    When an event is sent to the machine and it encounters a transition object with a cond property set to a guard function, it will call that function with the current context and event object. If the guard returns true, the transition will be taken, otherwise, it will attempt the next transition for the event, or remain in the current state.

    The code logic is, before 'deposited' larger or equal than 100, we cannot do 'vending'. It uses 'guards' & 'cond'.

    const { Machine, interpret } = require("xstate");
    
    const vendingMachine = Machine(
      {
        id: "vendingMachine",
        initial: "idle",
        context: {
          deposited: 0
        },
        states: {
          idle: {
            on: {
              SELET_ITEM: {
                target: "vending",
                cond: "depositedEnough"
              },
              DEPOSIT_QUARTER: {
                actions: ["addQuarter"]
              }
            }
          },
          vending: {}
        }
      },
      {
        actions: {
          addQuarter: assign({
            deposited: context => context.deposited + 25
          })
        },
        guards: {
          depositedEnough: context => context.deposited >= 100
        }
      }
    );

    Before valid:

    After valid:

    vending:

  • 相关阅读:
    4.程序员那点事-遭窃
    3.程序员那点事-惭愧与无奈
    2.程序员那点事-迷惘与憧憬
    1.程序员那点事-抉择
    6月22日の勉強レポート
    6月20日の勉強レポート
    6月16日の勉強レポート
    6月15日の勉強レポート
    IOSアプリケーション開発環境の構築
    iOSシステム構成の纏め
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12215896.html
Copyright © 2011-2022 走看看