Skip to content
Version: XState v4

Actors

When you run a statechart, it becomes an actor: a running process that can receive messages, send messages and change its behavior based on the messages it receives, which can cause effects outside of the actor.

An invoked actor is an actor that can execute its own actions and communicate with the machine. These invoked actors are started in a state and stopped when the state is exited.

Invoked actors are are labeled on their invoking state with “Invoke /” followed by the actor’s source name and ID.

You can invoke multiple actors on a single state. Top-level final states cannot have invoked actors.

Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Opened state invokes a startVideo actor and has a description of “The video player should be in full-screen mode.” The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s a delayed transition from the Stopped state back to the Closed state after 5 seconds.Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Opened state invokes a startVideo actor and has a description of “The video player should be in full-screen mode.” The Opened state contains Playing and Paused states, which are transitioned between using the Pause and Play events. There’s a Stop event from the Opened state that transitions to the final state of Stopped. There’s a delayed transition from the Stopped state back to the Closed state after 5 seconds.

View this machine in the Stately Studio.

In the video player above, the startVideo actor is invoked when the video player is in the Opened state.

Invoke actors on a state​

First, select the state where you want to invoke an actor.

On the canvas​

  1. Select the state where you want to invoke an actor.
  2. Use the plus icon button to open the edit menu.
  3. Choose Invoked actor from the menu to add an invoked actor block to the event.
  4. Write your actor’s source in the invoked actors’s text input.

Add actor source logic and ID​

  1. Use the edit icon button to open the Invoked actor panel.
  2. Enter the actor’s source logic in the Source logic text input.
  3. Enter the actor’s ID in the Actor ID text input.

Using the event details panel​

  1. Select the state where you want to invoke an actor.
  2. Open the state Details panel from the right tool menu.
  3. Use the + Effect button to open the effects menu, and choose Add invoked actor.
  4. Use the edit icon button to open the Invoked actor panel.
  5. Enter the actor’s source logic in the Source logic text input.
  6. Enter the actor’s ID in the Actor ID text input.