Loading...
Loading...
Helps create XState v5 state machines in TypeScript and React. Use when building state machines, actors, statecharts, finite state logic, actor systems, or integrating XState with React/Vue/Svelte components.
npx skill4agent add seed-hypermedia/seed xstateCRITICAL: This skill covers XState v5 ONLY. Do not use v4 patterns, APIs, or documentation. XState v5 requires TypeScript 5.0+.
setupcreateMachinecreateActor| Actor Type | Creator | Use Case |
|---|---|---|
| State Machine | | Complex state logic with transitions |
| Promise | | Async operations (fetch, timers) |
| Callback | | Bidirectional streams (WebSocket, EventSource) |
| Observable | | RxJS streams |
| Transition | | Reducer-like state updates |
import { setup, assign, createActor } from 'xstate';
const machine = setup({
types: {
context: {} as { count: number },
events: {} as { type: 'increment' } | { type: 'decrement' },
},
actions: {
increment: assign({ count: ({ context }) => context.count + 1 }),
decrement: assign({ count: ({ context }) => context.count - 1 }),
},
}).createMachine({
id: 'counter',
initial: 'active',
context: { count: 0 },
states: {
active: {
on: {
increment: { actions: 'increment' },
decrement: { actions: 'decrement' },
},
},
},
});
// Create and start actor
const actor = createActor(machine);
actor.subscribe((snapshot) => console.log(snapshot.context.count));
actor.start();
actor.send({ type: 'increment' });| v4 (WRONG) | v5 (CORRECT) |
|---|---|
| |
| |
| |
| |
| |
| |
const actor = createActor(machine, {
inspect: (event) => {
if (event.type === '@xstate.snapshot') {
console.log(event.snapshot);
}
},
});@xstate.actor@xstate.event@xstate.snapshot@xstate.microstepfeature/
├── feature.machine.ts # Machine definition
├── feature.types.ts # Shared types (optional)
├── feature.tsx # React component
└── feature.test.ts # Machine tests| Level | Focus |
|---|---|
| Beginner | Counter, toggle machines; |
| Intermediate | Guards, actions, hierarchical states, |
| Advanced | Observable actors, spawning, actor orchestration |
useMachineuseActoruseSelector