XState v6 alpha
Guards
Allow a transition only when a condition passes.
XState v6 is in alpha
APIs and behavior may change before the stable release.
A guard is a synchronous condition on a transition.
submit: {
guard: ({ context }) => context.isValid,
target: 'submitting'
}Multiple guarded transitions
submit: [
{ guard: ({ context }) => context.role === 'admin', target: 'adminReview' },
{ target: 'standardReview' }
]Transitions are checked in order. Put the fallback last. Named guards can be defined with setup(...) and referenced by name.
Guards must be synchronous and free of side effects.
Use guards for rules such as:
- only submit a form when its required fields are valid
- only approve a refund when the amount is within the operator's limit
Do not fetch data in a guard. Invoke an actor, store the result in context, then guard on that result.
Define reusable guards with setup(...) so their names and inputs are checked.
const orderSetup = setup({
guards: {
hasStock: ({ context }) => context.available >= context.quantity
}
});TypeScript
Guard arguments are inferred from context and event schemas.
Guards cheatsheet
on: {
submit: [
{ guard: ({ context }) => context.isValid, target: 'submitting' },
{ target: 'invalid' }
]
}