The visual software modeling platform for app logic and workflows. Collaborate with your entire team to ship more robust code, faster.
- Tweets2.2K
- Following8
- Followers9.5K
- Likes3.7K
ALT Deterministic replay in action: Using queueMicrotask to sequentially process history events. This ensures that parent-child actor communication (like triage notices) stays perfectly ordered during state reconstruction. 🧵
![import { createMachine, initialTransition, transition } from 'xstate';
const machine = createMachine({
initial: 'pending',
states: {
pending: {
on: {
start: { target: 'started' },
},
},
started: {
entry: { type: 'doSomething' },
},
},
});
// Get initial state and actions
const [initialState, initialActions] = initialTransition(machine);
console.log(initialState.value); // 'pending'
console.log(initialActions); // [{ type: 'doSomething', ... }]
// Get next state and actions
const [nextState, actions] = transition(machine, initialState, {
type: 'start', // The event to send
});
console.log(nextState.value); // 'started'
console.log(actions); // [{ type: 'doSomething', ... }]](https://pbs.twimg.com/media/G3vBO9aWsAAA9z7.jpg?name=orig)
ALT import { createMachine, initialTransition, transition } from 'xstate'; const machine = createMachine({ initial: 'pending', states: { pending: { on: { start: { target: 'started' }, }, }, started: { entry: { type: 'doSomething' }, }, }, }); // Get initial state and actions const [initialState, initialActions] = initialTransition(machine); console.log(initialState.value); // 'pending' console.log(initialActions); // [{ type: 'doSomething', ... }] // Get next state and actions const [nextState, actions] = transition(machine, initialState, { type: 'start', // The event to send }); console.log(nextState.value); // 'started' console.log(actions); // [{ type: 'doSomething', ... }]
![const useCountStore = createStoreHook({
// store config
});
// In a React component
const [snapshot, store] = useCountStore();
// With a selector
const [count, store] = useCountStore((s) => s.context.count);
// Send events
const inc = () => store.trigger.inc({ by: 1 });](https://pbs.twimg.com/media/Gy0C_6MXgAAZFwE.jpg?name=orig)
ALT const useCountStore = createStoreHook({ // store config }); // In a React component const [snapshot, store] = useCountStore(); // With a selector const [count, store] = useCountStore((s) => s.context.count); // Send events const inc = () => store.trigger.inc({ by: 1 });
![import { createStoreHook } from '@xstate/store/react';
const useCountStore = createStoreHook({
context: { count: 0 },
on: {
inc: (ctx, event: { by: number }) => ({
...ctx,
count: ctx.count + event.by,
}),
},
});
// Usage with selector
function Counter() {
const [count, store] = useCountStore((s) => s.context.count);
return (
<div>
<div>Count: {count}</div>
<button onClick={() => store.trigger.inc({ by: 1 })}>
Increment by 1
</button>
<button onClick={() => store.trigger.inc({ by: 3 })}>
Increment by 3
</button>
</div>
);
}](https://pbs.twimg.com/media/Gy0DZu1XYAEqVzA.jpg?name=orig)
ALT import { createStoreHook } from '@xstate/store/react'; const useCountStore = createStoreHook({ context: { count: 0 }, on: { inc: (ctx, event: { by: number }) => ({ ...ctx, count: ctx.count + event.by, }), }, }); // Usage with selector function Counter() { const [count, store] = useCountStore((s) => s.context.count); return ( <div> <div>Count: {count}</div> <button onClick={() => store.trigger.inc({ by: 1 })}> Increment by 1 </button> <button onClick={() => store.trigger.inc({ by: 3 })}> Increment by 3 </button> </div> ); }
ALT Screenshot of the CellEditor Machine
ALT // Regular atoms const countAtom = createAtom(1); countAtom.get(); // 1 const flavorAtom = createAtom('chocolate'); // Derived atom that combines both const donutMessageAtom = createAtom(() => { const count = countAtom.get(); const flavor = flavorAtom.get(); return `${count} ${flavor} donut${count === 1 ? '' : 's'}`; }); console.log(donutMessageAtom.get()); // "1 chocolate donut" countAtom.set(3); console.log(donutMessageAtom.get()); // "3 chocolate donuts" flavorAtom.set('strawberry'); console.log(donutMessageAtom.get()); // "3 strawberry donuts"
ALT import { createAsyncAtom } from '@xstate/store'; const donutOrderAtom = createAsyncAtom(async () => { const order = { flavor: 'glazed', quantity: 12 }; const data = await submitDonutOrder(order); return data; }); donutOrderAtom.subscribe((state) => { if (state.status === 'pending') { console.log('🧾 Placing your order...'); } else if (state.status === 'done') { console.log('🍩', state.data); } else if (state.status === 'error') { console.log('😢 Order failed:', state.error); } });
