Skip to content

提示 01:状态管理(Zustand)

目标: 为塔罗解读流程创建一个健壮的状态管理系统,移植 Web 应用的 cardPickerModalStore

设计需求:

  • 技术栈: zustand(React Native/Expo 的标准选择)。
  • 核心状态:
    • selectedCards:用户当前选中的卡牌索引数组。
    • requiredCards:特定牌阵所需的卡牌数量。
    • spreadData:包含 spreadIdpositionscardsCountuserSelectionCount(用于是/否模式)的对象。
    • phase'picking' | 'transitioning' | 'revealing' | 'loading'
    • deck:当前随机化的 78 张牌组。
    • flippedCards:已翻转揭示的卡牌索引数组。
    • resolvedCards:发送给 API 的最终解读数据(cardId、positionIndex、isReversed)。
  • 操作:
    • toggleCard(index):选中/取消选中一张牌。处理约束逻辑(允许的最大牌数)。
    • shuffleDeck():重新随机化 78 张牌组。
    • flipCard(index):记录翻牌交互。
    • setPhase(phase):更新解读状态阶段。
    • setResolvedCards(cards):存储最终解读结果。
    • reset():重置状态以开始新的解读。

代码规范:

  • 使用 TypeScript 进行严格类型检查。
  • 确保 store 在必要时可序列化,或合理组织结构以避免 React Native 桥接问题。
  • 是否包含持久化中间件?(可选:对于进行中的解读可能不需要,因为它们应该是全新的)。

上下文:

  • Web 应用使用 useCardPickerModalStore
  • 我们需要匹配"是/否"牌阵的选择数量与牌阵总牌数不同的逻辑。

交付物:

  • src/stores/cardPickerStore.ts

Internal documentation for MysticX team