mcpField
X
xstate-store

xstate-store

github.com/pedronauck开发64485 次安装1 周前更新
代码仓库

关于 xstate-store

xstate-store 是面向 TypeScript 项目的编码技能,适用于 @xstate/store v4 和 @xstate/store-react v2。它指导选择状态原语,并提供关于 Store 逻辑、React 集成、测试和迁移的分主题参考。

主要功能

  1. 01选择状态原语
  2. 02实现 Store 转换与副作用
  3. 03使用原子和选择器
  4. 04将 Store 接入 React
  5. 05测试和迁移 Store

适用场景

  1. 01为功能选择状态模型
  2. 02添加异步副作用和发出的事件
  3. 03将 Store 状态接入 React 组件
  4. 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.md
extensions.md
migration-v4.md
react.md
schemas-and-validation.md
selectors-and-atoms.md
store-core.md
store-logic-and-input.md
testing-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 machinestore 用于建模数据,而非生命周期

完成条件: 根据此表选择基本构件,且选择理由成立。

分支

如果你正在……参考文档
创建 store、编写转换、使用 trigger/send/can 或 Immerreferences/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 构建可复用/实例级 storereferences/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 storereferences/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()。

评论

支持 Markdown