Skip to content
Version: XState v4

Entry & exit actions

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.

You can fire multiple entry and exit actions on a state. Top-level final states cannot have exit actions, since the machine is stopped and no further transitions can occur.

Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Playing state has an entry action for starting a video playing indicated by the ‘Entry’ label and the text playVideo, and an exit action for pausing a video indicated by the ‘Exit’ lable and the text pauseVideo. 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 an onDone event from the parent Opened state back to the Closed state.Video player state machine containing closed and opened states. On the Play event, the Closed state transitions to the Opened state. The Playing state has an entry action for starting a video playing indicated by the ‘Entry’ label and the text playVideo, and an exit action for pausing a video indicated by the ‘Exit’ lable and the text pauseVideo. 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 an onDone event from the parent Opened state back to the Closed state.

View this machine in the Stately Studio.

In our video player, we have entry and exit actions on the Playing state. We use the entry action of playVideo to fire an effect playing the video on entry to the Playing state. We use the exit action of pauseVideo to fire an effect pausing the video when the Playing state is exited.

Add a transition action​

First, select the event where you want an action to be fired.

On the canvas​

  1. Use the plus icon button to open the edit menu.
  2. Choose Action from the menu to add an action block.
  3. Write your action’s name in the action’s text input.

Using the event details panel​

  1. Open the event Details panel from the right tool menu.
  2. Use the + Transition action button to add an action block.
  3. Write your action’s name in the action’s text input.

Delete a transition action​

First, select the transition action block you want to delete.

Using backspace​

Use the Backspace key to delete the transition action.

Using the event details panel​

  1. Open the event Details panel from the right tool menu.
  2. Hover, focus, or select the transition action block to reveal the trash icon button.
  3. Use the trash icon button to delete the action.

Add an entry action or exit action to a state​

First, select the state you want to have an entry or exit action.

On the canvas​

  1. Select the state where you want to add an action.
  2. Use the plus icon button to open the edit menu.
  3. Choose Entry action or Exit action from the menu to add an action block to the event.
  4. Write your action’s name in the action’s text input.

Using the event details panel​

  1. Open the state Details panel from the right tool menu.
  2. Use the + Effect button to open the effects menu, and choose Add entry action or Add exit action.
  3. Write your action’s name in the action’s text input.

Delete an entry action or exit action from a state​

First, select the action block you want to delete.

Using backspace​

Use the Backspace key to delete the action.

Using the event details panel​

  1. Open the event Details panel from the right tool menu.
  2. Hover, focus, or select the action block to reveal the trash icon button.
  3. Use the trash icon button to delete the action.

Add a built-in action​

You can add 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 a transition action, entry action, or exit action.

On the canvas​

  1. Hover, focus, or select the action block to reveal the edit icon button.
  2. Use the edit icon button to open the Action panel.
  3. Choose your desired action from the dropdown menu at the top of the Action panel.
  4. Fill out the required corresponding action input fields.

Using the details panel​

  1. Open the state, or event Details panel from the right tool menu.
  2. Hover, focus, or select the action block to reveal the edit icon button.
  3. Use the edit icon button to open the Action panel.
  4. Choose your desired action from the dropdown menu at the top of the Action panel.
  5. Fill out the required corresponding action input fields.

Add a custom action​

You can also add custom actions with a custom action type and parameters which will be formatted as XState action objects in your exported code.

First, add a transition action, entry action, or exit action.

On the canvas​

  1. Hover, focus, or select the action block to reveal the edit icon button.
  2. Use the edit icon button to open the Action panel.
  3. Custom action is selected by default. Add your custom action type in the Action type text input.
  4. Add your custom Action parameters using the Parameter key and Parameter value text input pairs.

Read about action objects below for more on action types and and parameters.

Using the details panel​

  1. Open the state, or event Details panel from the right tool menu.
  2. Hover, focus, or select the action block to reveal the edit icon button.
  3. Use the edit icon button to open the Action panel.
  4. Custom action is selected by default. Add your custom action type in the Action type text input.
  5. Add your custom Action parameters using the Parameter key and Parameter value text input pairs.