提示 01:状态管理(Zustand)
目标: 为塔罗解读流程创建一个健壮的状态管理系统,移植 Web 应用的 cardPickerModalStore。
设计需求:
- 技术栈:
zustand(React Native/Expo 的标准选择)。 - 核心状态:
selectedCards:用户当前选中的卡牌索引数组。requiredCards:特定牌阵所需的卡牌数量。spreadData:包含spreadId、positions、cardsCount、userSelectionCount(用于是/否模式)的对象。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