XState v6 alpha
Quick start
Create and run your first XState state machine.
XState v6 is in alpha
APIs and behavior may change before the stable release.
XState helps you model how software responds to events. This example models a media player with three states.
Install XState
npm install xstate@alphaCreate a state machine
import { createActor, createMachine } from 'xstate';
const playerMachine = createMachine({
initial: 'stopped',
states: {
stopped: { on: { play: { target: 'playing' } } },
playing: {
on: {
pause: { target: 'paused' },
stop: { target: 'stopped' }
}
},
paused: {
on: {
play: { target: 'playing' },
stop: { target: 'stopped' }
}
}
}
});
const player = createActor(playerMachine).start();
player.send({ type: 'pause' });
console.log(player.getSnapshot().value); // 'stopped'
player.send({ type: 'play' });
console.log(player.getSnapshot().value); // 'playing'The first pause event does not change the state. The stopped state does not define what should happen for that event. The player can only follow the transitions you define.
The machine describes the behavior. createActor(...) creates a running actor from that behavior. You can send events to the actor and read its current snapshot.