SuperAPI AI 工具集

zustand-store-patterns

智能体与模型

查看项目

更新于 10-16 09:35

技能介绍

用途:本资料是 Stellar Lab 中两种 Zustand store 模式的参考,用于在新建 store 或添加状态时判断该用哪一个。

两种 store:

  1. 主 store,文件 src/store/createStore.ts,Hook 为 useStore(),中间件为 querystring(immer(...)),持久化到 URL querystring,刷新和关闭标签页后仍保留(靠 URL),实例随 provider 挂载新建。适用于全应用范围、可经 URL 分享或在交易流程之外使用的状态,如网络设置、XDR 查看器状态、endpoint explorer、账户页状态,约 85 个文件使用。
  2. 交易流程 store,文件 src/store/createTransactionFlowStore.ts,Hook 为 useBuildFlowStore(),中间件为 persist(immer(...)),持久化到 sessionStorage,刷新后保留、关闭标签页后不保留,为模块级单例。适用于单页交易流程内状态,如构建参数、操作、模拟结果、已签名 XDR、步骤导航,约 21 个文件使用;模拟结果可能超过 50KB,不适合放 URL。

跨 store 读取:交易流程组件可将主 store 的 network 作为只读依赖读取,不要把网络配置复制进 flow store。

水合:主 store 在创建时同步传入 URL,无需手动 rehydrate。flow store 需设 skipHydration: true,并在模块作用域(而非 useEffect)中调用 useBuildFlowStore.persist.rehydrate(),否则子组件 effect 先于父组件执行,会用默认值覆盖已持久化数据。

使用方式:主 store 经 React Context 消费(import useStore),支持选择器;flow store 直接 import(单例)。构建流程与导入流程各有独立 store 实例和 storage key(stellar_lab_tx_flow_build、stellar_lab_tx_flow_import),切换标签互不清除。

添加状态:主 store 在 createStore.ts 加字段与 action,需持久化到 URL 则加进 select();flow store 加到相应 slice(build、simulate、sign、validate、submit),用 Immer 可变语法写 setter,加入 INITIAL_STATE 默认值,必要时加入重置逻辑。

数据约定:XDR 一律存 base64 字符串而非 SDK 对象;RPC 结果存原始 JSON 字符串;activeStep 与 highestCompletedStep 持久化;校验状态只能提升 highestCompletedStep,除显式重置外不得降低。sessionStorage 读写需 try-catch:写入失败(QuotaExceededError)退化为仅内存,读取失败(JSON 损坏)重置默认状态;隐私模式行为相同但关标签即清。

限制:以上为 Stellar Lab 项目内部约定,是否适用于其他项目暂未提供说明。