[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:
相关文章
- How to deal with "Could not find component on update server. Contact VMware Support or your system administrator." in Vmware.
- [Typescript] Force to valid the type by using Valid branded type
- [Typescript + React] Tip: Use generics in React to make dynamic and flexible components
- [React Recoil] Write a Custom Recoil Hook to Reset a Value in the Recoil State
- [Yarn] Use yarn up to Update Dependencies In A Yarn Workspace
- [XState] Conditionally Transition to States with Guards in XState
- [Node.js] Write or Append to a File in Node.js with fs.writeFile and fs.writeFileSync
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [RxJS] Add debug method to Observable in TypeScript
- [Typescript] Tips: Use 'in' operator to transform a union to another union(watched)
- [Node.js] Write or Append to a File in Node.js with fs.writeFile and fs.writeFileSync
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [JS Compse] 4. A collection of Either examples compared to imperative code
- [D3] Convert Dates to Numeric Values with Time Scales in D3 v4
- [WebStrom] Cannot detect file change to trigger webpack re-compile
- user parameter to determine cache in SAP Gateway
- An example to fix Generic stop set error status in tcode SMQ1
- R3 data related to category and hierarchy mapping logic in CRM
- 成功解决TypeError: Value passed to parameter 'paddings' has DataType float32 not in list of allowed valu
- 已解决To enable them in other operations, rebuild TensorFlow with the appropriate compiler flags
- Peer To Peer——对等网络
- 论文解读(BYOL)《Bootstrap Your Own Latent A New Approach to Self-Supervised Learning》
- 解决selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in P