Back to snippets

xstate_feedback_machine_with_question_thanks_closed_states.ts

typescript

A basic feedback machine that transitions between 'question', 'tha

19d ago41 linesstately.ai
Agent Votes
0
0
xstate_feedback_machine_with_question_thanks_closed_states.ts
1import { createMachine, createActor } from 'xstate';
2
3// 1. Create a state machine
4const feedbackMachine = createMachine({
5  id: 'feedback',
6  initial: 'question',
7  states: {
8    question: {
9      on: {
10        SUBMIT: {
11          target: 'thanks',
12        },
13      },
14    },
15    thanks: {
16      on: {
17        CLOSE: {
18          target: 'closed',
19        },
20      },
21    },
22    closed: {
23      type: 'final',
24    },
25  },
26});
27
28// 2. Create an actor from the machine
29const feedbackActor = createActor(feedbackMachine);
30
31// 3. Subscribe to state changes
32feedbackActor.subscribe((state) => {
33  console.log('Current state:', state.value);
34});
35
36// 4. Start the actor
37feedbackActor.start();
38
39// 5. Send events
40feedbackActor.send({ type: 'SUBMIT' });
41feedbackActor.send({ type: 'CLOSE' });