digital-pilates/docs/mood-redux-migration.md

心情管理 Redux 迁移总结

概述

本次迁移将心情管理相关的数据从本地状态管理迁移到 Redux 中进行统一管理，确保多个页面之间的数据状态同步。

迁移内容

1. 创建 Redux Slice

文件: store/moodSlice.ts

• 创建了完整的心情状态管理
• 包含异步 actions 用于 API 调用
• 提供选择器用于数据获取
• 支持心情记录的增删改查操作

主要功能：

• fetchDailyMoodCheckins: 获取指定日期的心情记录
• fetchMoodHistory: 获取心情历史记录
• fetchMoodStatistics: 获取心情统计数据
• createMoodRecord: 创建心情记录
• updateMoodRecord: 更新心情记录
• deleteMoodRecord: 删除心情记录

2. 创建自定义 Hook

文件: hooks/useMoodData.ts

• 提供了简化的心情数据访问接口
• 包含类型安全的参数定义
• 支持多种使用场景

主要 Hook：

• useMoodData(): 通用心情数据管理
• useMoodRecords(date): 获取指定日期的心情记录
• useTodayMood(): 获取今天的心情记录

3. 更新 Store 配置

文件: store/index.ts

• 将 moodReducer 添加到 Redux store 中
• 确保心情状态在整个应用中可用

4. 迁移的页面

心情日历页面 (app/mood/calendar.tsx)

• 使用 useMoodData hook 替代本地状态
• 通过 Redux 管理月份心情数据和选中日期记录
• 保持原有的 UI 交互逻辑

心情编辑页面 (app/mood/edit.tsx)

• 使用 Redux actions 进行数据操作
• 通过 useMoodRecords 获取当前日期的记录
• 支持创建、更新、删除操作

心情统计页面 (app/mood-statistics.tsx)

• 使用 Redux 管理历史数据和统计数据
• 通过 useMoodData 获取统计数据
• 保持原有的统计展示逻辑

统计页面 (app/(tabs)/statistics.tsx)

• 使用 selectLatestMoodRecordByDate 获取当前日期的心情记录
• 通过 Redux 管理心情数据的加载状态

数据流

之前的数据流

页面组件 → 本地状态 → API 调用 → 更新本地状态

现在的数据流

页面组件 → Redux Actions → API 调用 → Redux Store → 页面组件

优势

1. 数据同步

• 多个页面共享同一份心情数据
• 避免数据不一致的问题
• 减少重复的 API 调用

2. 状态管理

• 统一的状态管理逻辑
• 更好的错误处理和加载状态
• 支持数据缓存和优化

3. 开发体验

• 类型安全的 API 接口
• 简化的数据访问方式
• 更好的代码组织和维护性

4. 性能优化

• 避免重复的数据请求
• 支持数据预加载
• 更好的内存管理

使用示例

基本使用

import { useMoodData } from '@/hooks/useMoodData';

function MyComponent() {
  const { createMood, updateMood, deleteMood } = useMoodData();
  
  const handleCreate = async () => {
    await createMood({
      moodType: 'happy',
      intensity: 8,
      description: '今天很开心'
    });
  };
}

获取特定日期的记录

import { useMoodRecords } from '@/hooks/useMoodData';

function MyComponent() {
  const { records, latestRecord, loading } = useMoodRecords('2024-01-01');
  
  if (loading) return <Loading />;
  
  return <div>{latestRecord?.moodType}</div>;
}

注意事项

1. 类型安全: 所有 API 调用都有完整的 TypeScript 类型定义
2. 错误处理: Redux 提供了统一的错误处理机制
3. 加载状态: 每个操作都有对应的加载状态管理
4. 数据缓存: Redux 会自动缓存已加载的数据，避免重复请求

后续优化建议

1. 数据持久化: 考虑使用 Redux Persist 进行数据持久化
2. 离线支持: 添加离线数据同步功能
3. 实时更新: 考虑添加 WebSocket 支持实时数据更新
4. 性能监控: 添加性能监控和优化指标

测试建议

1. 单元测试: 为 Redux actions 和 reducers 编写单元测试
2. 集成测试: 测试页面组件与 Redux 的集成
3. 端到端测试: 测试完整的心情管理流程
4. 性能测试: 测试大量数据下的性能表现