Skip to content
Version: XState v5

Actions and actors

While the statechart is running, it can execute other effects called actions. You can fire an action upon entry or exit of a state. Actions are “fire-and-forget effects”; once the machine has fired the action, it moves on and forgets the action. You can also fire actions on transitions. 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 and use Entry action or Exit action.
  • Select a transition and use 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 Action panel and add custom action parameters. 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.

XState built-in actions​

You can choose from the following built-in XState actions, 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.

To add a built-in action, first add an action. Read more about actions in XState.

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 Invoked actor panel and enter the actor’s source logic and ID. The ID can be used with the sendTo or stop actions to stop and send events to the actor.

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.

Spawning actors in Stately’s editor​

Coming soon