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
Decision gist · record as of 2026-07-26
XState Store helps you manage persistent, event-driven state in TypeScript apps with extensions and React bindings. 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.
Use it when
- XState Store supports persistent storage through extensions that let you save and restore machine state automatically.
- XState Store implementation involves using createStore or createStoreLogic to define your state machine logic.
Install
pedronauck/skills/xstate-store · repository language: JavaScript
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Integrate persistent storage with xstate state machines”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Xstate v5 provides patterns for finite state machines, the actor model, and lightweight event-driven stores using @xstate/store. Learn how to eliminate impossible states, orchestrate workflows with TanStack Query integration, and apply type-safe machine design with the setup() API in React applications.
This adapter bridges XState Store atoms into json-render's StateStore interface, letting you manage application state through @xstate/store. Pass an atom to the adapter and wrap your json-render components with the resulting store provider.
Zustand is a minimal state manager for React built on useSyncExternalStore, offering type-safe stores, atomic selectors to prevent unnecessary re-renders, and composable middleware like persist and devtools. It handles client-side global state, persistent preferences, and multi-domain stores while keeping bundle size lean.
This skill teaches you how to structure and implement self-contained domain modules that own their API calls, data fetching, hooks, and components. It covers the mandatory directory layout, API service layer patterns, TanStack Query integration for queries and mutations, React context conventions, XState store setup, and public API organization. Use it when creating new systems, extending existing ones, or debugging system-layer code.
Build and refine state machines and statecharts using XState v5 patterns in TypeScript. This skill handles machine design from fuzzy requirements, code implementation and review, v4-to-v5 migration, and integration with React, Vue, Svelte, or Solid frameworks. It also helps you choose between XState and @xstate/store based on your domain's complexity.
Zustand State Management teaches you to build type-safe global state for React without boilerplate. Master the three core patterns—basic stores, TypeScript-first setup, and persistent storage—while avoiding common pitfalls like hydration mismatches and infinite render loops.
More skills jotai (Apache-2.0)