XState v6 alpha
Effects and emitted events
Run effects and notify external subscribers.
XState v6 is in alpha
APIs and behavior may change before the stable release.
Declare emitted event schemas, then use the enqueue argument to schedule effects after the context transition.
import { createStore } from '@xstate/store';
import { z } from 'zod';
const store = createStore({
schemas: {
emitted: {
'document.saved': z.object({ id: z.string() })
}
},
context: { document: null as Document | null },
on: {
save: (context, event: { document: Document }, enq) => {
enq.effect(() => saveDocument(event.document));
enq.emit['document.saved']({ id: event.document.id });
return { document: event.document };
}
}
});Subscribe to emitted events without observing every context change.
store.on('document.saved', (event) => console.log(event.id));Effects run after the next context is calculated. Emitted events notify external consumers without becoming store transitions.
Use effects to write a draft to storage or send analytics. Use emitted events to notify a toast system or close a dialog after a save.
Use store.inspect(...) to observe every store transition without changing store behavior.
const subscription = store.inspect((event) => {
console.log(event.event, store.getSnapshot().context);
});
subscription.unsubscribe();TypeScript
Emitted event payloads are inferred from the store configuration.
Effects cheatsheet
enq.effect(() => runEffect());
enq.emit.notice({ message });
enq.trigger.refresh();
store.on('notice', (event) => console.log(event.message));
store.inspect((event) => console.log(event));