关于 xstate-store
xstate-store 是面向 TypeScript 项目的编码技能,适用于 @xstate/store v4 和 @xstate/store-react v2。它指导选择状态原语,并提供关于 Store 逻辑、React 集成、测试和迁移的分主题参考。
主要功能
- 01选择状态原语
- 02实现 Store 转换与副作用
- 03使用原子和选择器
- 04将 Store 接入 React
- 05测试和迁移 Store
适用场景
- 01为功能选择状态模型
- 02添加异步副作用和发出的事件
- 03将 Store 状态接入 React 组件
- 04迁移 v3 或 Zustand Store
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ pedronauck/ skills --skill xstate-store安装后在 Claude Code 中输入/xstate-store确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/effects-and-events.mdextensions.mdmigration-v4.mdreact.mdschemas-and-validation.mdselectors-and-atoms.mdstore-core.mdstore-logic-and-input.mdtesting-and-interop.md详细介绍
XState Store
目标版本为 @xstate/store v4 和 @xstate/store-react v2(TypeScript 5.4+)。请阅读与所更改的 API 或行为相对应的参考文档。仅当更改涉及相邻主题时,才加载相邻参考文档;重用已阅读的相关上下文。
先选择基本构件
| 状态 | 基本构件 | 原因 |
|---|---|---|
| 通过命名事件更新的领域状态 | createStore({ context, on }) | 提供类型化的 trigger、can、已发出的事件和可重放的转换 |
| 根据输入构建的实例级状态 | createStoreLogic({ context: (input) => … }) | 一个定义,多个实例;还会附带 selectors |
| 直接设置的单个值 | createAtom(value) | 无需为其定义事件集,因此不必使用 store |
| 根据其他 atom 或选择器计算出的值 | createAtom(() => …) | 只读,并会在依赖项变化时重新计算 |
| 模式、守卫、延迟、层级状态或并行状态 | xstate machine | store 用于建模数据,而非生命周期 |
完成条件: 根据此表选择基本构件,且选择理由成立。
分支
| 如果你正在…… | 参考文档 |
|---|---|
创建 store、编写转换、使用 trigger/send/can 或 Immer | references/store-core.md |
| 排入效果、发出事件或执行异步操作 | references/effects-and-events.md |
声明 schemas 或启用运行时验证 | references/schemas-and-validation.md |
使用 store.select、atoms、派生/异步/reducer atoms 读取状态 | references/selectors-and-atoms.md |
使用 createStoreLogic、输入或 selectors 构建可复用/实例级 store | references/store-logic-and-input.md |
添加 persist、undoRedo、reset 或组合 .with(...) | references/extensions.md |
| 将 store 接入 React 组件 | references/react.md |
| 测试转换、检查 store 或与 XState 互操作 | references/testing-and-interop.md |
| 将 v3 store 升级到 v4,或迁移现有的 Zustand store | references/migration-v4.md |
应用与所更改行为相关的技术规则。
注意事项
转换 — 返回完整的下一个 context(展开旧 context);返回 undefined 表示不允许该事件,这也是 store.can.*() 报告的结果。
效果 — 在转换中同步调用 enqueue.effect、enqueue.emit.* 和 enqueue.trigger.*;异步操作应放在 enqueue.effect(async () => …) 中,并通过触发另一个事件报告结果。
导入 — 框架绑定来自 @xstate/store-react(及其同类包),绝不能使用 @xstate/store/react;扩展来自 @xstate/store/persist、/undo、/reset、/validate。
Schemas — schemas 用于为 store 添加类型;只有 .with(validateSchemas()) 才会执行运行时验证。
Atoms — 计算型 atoms 通过 .get() 读取依赖项;其第一个参数是上一次计算得到的值,因此使用时请为 createAtom<T>(…) 添加类型标注。
React — 应用级状态使用模块作用域的 store,组件级状态使用 useStore(logic, input);通过 useSelector/useAtom 订阅,而不是使用 getSnapshot()。