Skip to content
Version: XState v4

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 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:

Spawning actors in Stately’s editor​

Coming soon