Actions and actors
While the state machine is running, it can execute effects called actions. Actions are executed when a transition is triggered. Actions are “fire-and-forget effects”; once the machine has fired the action, it continues processing the transition and forgets the action. You can also fire actions when a state is entered or exited. Read more about actions.
State machines can invoke actors as longer-running processes that can receive events, send events, and change their behavior based on the events they receive. You can invoke actors on entry to a state and stop on exit. Read more about actors.
Add actions
- Select a state or transition and use Action.
- Select a state and use Entry action or Exit action.
- Select a state or transition, open the Details panel from the right tool menu, and use the Effect or Action button and choose Add entry action, Add exit action, or Add action.
Use the edit icon button to open the Sources panel and add custom implementation code. Actions are created as custom actions by default, but you can also use XState built-in actions.
To remove an action, use the Backspace key, right-click and choose Delete, or use the delete icon button in the Details panel.
Add action parameters
You can add action parameters by selecting the action and using add parameter.
Add invoked actors
You can invoke multiple actors on a single state. Top-level final states cannot have invoked actors. Read more about invoking actors.
In the video player above, the startVideo actor is invoked when the video player is in the Opened state.
Invoke actors on a state
- Select a state and use Invoke.
- Select a state, open the state Details panel from the right tool menu, and use the Effect button and choose Add invoked actor.
Use the edit icon button to open the Sources panel and enter the actor’s source logic.
Provide your actor with an ID so it can be used with the sendTo
or stop
actions to stop and send events to the actor. You can add actor input by selecting the actor and using add input property.
To remove an actor, use the Backspace key, right-click and choose Delete, or use the delete icon button in the Details panel.
Invoke done and invoke error events
Invoke done events and invoke error events transition from a state once its invocation has been completed or returns an error. The source state must have an invoked actor to create an invoke done or invoke error event.
- Select the state with an invoked actor and create a new transition from that state. The first new transition will be created as an invoke done event.
- Subsequent new transitions will be created as invoke error events.
To change an invoke done or invoke error event back into a regular transition, Use the triple dot menu or right-click the transition, and from Event type, choose Always.
XState built-in actions
You can use the following built-in XState actions from the logic templates in the Sources panel, which will be formatted in your exported code. The options are:
-
assign: assigns data to the state context.
-
raise: raises an event that is received by the same machine.
-
log: an easy way to log messages to the console.
-
sendTo: sends an event to a specific actor.
-
stop: stops a child actor.
Spawning actors in Stately’s editor
Coming soon