xstate_basic_toggle_state_machine_with_actor.ts

1import { createMachine, createActor } from 'xstate';
2
3// 1. Create a state machine
4const toggleMachine = createMachine({
5  id: 'toggle',
6  initial: 'Inactive',
7  states: {
8    Inactive: {
9      on: { toggle: 'Active' }
10    },
11    Active: {
12      on: { toggle: 'Inactive' }
13    }
14  }
15});
16
17// 2. Create an actor from the machine
18const toggleActor = createActor(toggleMachine);
19
20// 3. Subscribe to state changes
21toggleActor.subscribe((state) => {
22  console.log('Current state:', state.value);
23});
24
25// 4. Start the actor
26toggleActor.start();
27
28// 5. Send events
29toggleActor.send({ type: 'toggle' }); // logs "Current state: Active"
30toggleActor.send({ type: 'toggle' }); // logs "Current state: Inactive"