Xstate Store
XState Store guides you through building typed, event-driven state with createStore or createStoreLogic, adding persistence and undo-redo via extensions, and wiring stores into React. Learn when to reach for atoms, how to enqueue effects and emit events, declare runtime schemas, and migrate from v3.
XState Store helps you manage persistent, event-driven state in TypeScript apps with extensions and React bindings.
AI-generated summary based on this skill's SKILL.md
Install
pedronauck/skills/xstate-store · repository language: JavaScript
git clone https://github.com/pedronauck/skills
cp -r skills ~/.claude/skills/xstate-storegenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install pedronauck/skills/xstate-storeFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is XState Store and how does it manage application state?
XState Store is a library for building typed, event-driven state management. XState Store uses createStore or createStoreLogic to define state machines that handle application state transitions. It enables you to declare runtime schemas, enqueue effects, and emit events while maintaining type safety across your application.
How do you integrate persistent storage with XState state machines?
XState Store supports persistent storage through extensions that let you save and restore machine state automatically. You can add persistence and undo-redo capabilities via XState Store's extension system, which integrates with your storage layer to synchronize state changes. This allows your state machines to survive page reloads and maintain history.
What is the XState store implementation and how do you set it up?
XState Store implementation involves using createStore or createStoreLogic to define your state machine logic. XState Store setup requires declaring your state shape, events, and transitions, then optionally adding extensions for persistence or undo-redo. You can then wire XState Store into React components to dispatch events and subscribe to state changes.
How do you store and retrieve XState machine state?
XState Store lets you store machine state by persisting snapshots through extensions, and retrieve it by restoring from your storage layer on initialization. XState Store's snapshot system captures the current state and context, which extensions can serialize to localStorage, databases, or other backends for later retrieval and state hydration.
When should you use XState Store versus atoms in state management?
XState Store is best when you need event-driven, typed state machines with complex transitions and side effects. Use atoms for simpler, granular reactive values. XState Store excels at managing application-wide state with clear event semantics, while atoms work better for isolated, independent pieces of state.
What are XState Store best practices for managing state?
XState Store best practices include declaring runtime schemas upfront, using extensions for cross-cutting concerns like persistence, keeping state machines pure and testable, and migrating incrementally from v3. Structure your stores around domain logic, emit events clearly, and leverage XState Store's type system to catch errors at development time.