bw-mini-app/src/store

Redux Store 使用指南

本项目已从 Zustand 迁移到 Redux Toolkit，以下是使用指南。

目录结构

src/
├── store/
│   ├── index.ts          # Store 配置
│   └── types.ts          # 类型定义
├── constants/            # Action 类型常量
│   ├── history.ts
│   └── template.ts
├── actions/              # Action creators
│   ├── history.ts
│   └── template.ts
├── reducers/             # Reducers
│   ├── index.ts
│   ├── history.ts
│   └── template.ts
├── selectors/            # 选择器
│   ├── history.ts
│   └── template.ts
└── hooks/
    └── redux.ts          # 类型化的 hooks

基本使用

1. 在组件中使用 Redux

import { useAppDispatch, useAppSelector } from '../../hooks/redux'
import { selectHistoryRecords, selectHistoryLoading } from '../../selectors/history'
import { loadRecords, addRecord } from '../../actions/history'

export default function MyComponent() {
  const dispatch = useAppDispatch()
  const records = useAppSelector(selectHistoryRecords)
  const loading = useAppSelector(selectHistoryLoading)

  useEffect(() => {
    dispatch(loadRecords())
  }, [dispatch])

  const handleAddRecord = async () => {
    try {
      await dispatch(addRecord({
        type: 'image-to-image',
        templateId: '1',
        templateName: '艺术风格',
        inputImage: 'path/to/image.jpg',
        status: 'generating'
      }))
    } catch (error) {
      console.error('添加记录失败:', error)
    }
  }

  return (
    <View>
      {loading && <Text>加载中...</Text>}
      {records.map(record => (
        <View key={record.id}>
          <Text>{record.templateName}</Text>
        </View>
      ))}
      <Button onClick={handleAddRecord}>添加记录</Button>
    </View>
  )
}

2. 历史记录管理

// 加载历史记录
dispatch(loadRecords())

// 添加新记录
dispatch(addRecord({
  type: 'image-to-video',
  templateId: '2',
  templateName: '视频生成',
  inputImage: 'path/to/image.jpg',
  status: 'generating'
}))

// 更新记录
dispatch(updateRecord('record_id', {
  status: 'completed',
  outputResult: 'path/to/result.mp4'
}))

// 删除记录
dispatch(deleteRecord('record_id'))

// 清空所有记录
dispatch(clearRecords())

3. 模板管理

// 初始化模板
import { TEMPLATE_CONFIG } from '../../config/templates'
dispatch(initTemplates(TEMPLATE_CONFIG))

// 设置选中的模板
dispatch(setSelectedTemplate(template))

// 获取模板列表
const templates = useAppSelector(selectTemplates)

// 获取选中的模板
const selectedTemplate = useAppSelector(selectSelectedTemplate)

// 根据类型筛选模板
const videoTemplates = useAppSelector(state => 
  selectTemplatesByType(state, 'image-to-video')
)

4. 选择器使用

// 基本选择器
const records = useAppSelector(selectHistoryRecords)
const loading = useAppSelector(selectHistoryLoading)
const error = useAppSelector(selectHistoryError)

// 带参数的选择器
const record = useAppSelector(state => selectRecordById(state, 'record_id'))
const generatingRecords = useAppSelector(state => 
  selectRecordsByStatus(state, 'generating')
)

迁移说明

从 Zustand 迁移到 Redux

原来的 Zustand 用法：

// 旧的 Zustand 用法
const { records, loadRecords, addRecord } = useHistoryStore()

新的 Redux 用法：

// 新的 Redux 用法
const dispatch = useAppDispatch()
const records = useAppSelector(selectHistoryRecords)

// 调用 actions
dispatch(loadRecords())
dispatch(addRecord(recordData))

注意事项

1. 所有异步操作都通过 Redux Thunk 处理
2. 使用类型化的 hooks (useAppDispatch, useAppSelector)
3. 选择器函数提供了类型安全的状态访问
4. 所有状态更新都是不可变的
5. 错误处理通过 Redux 状态管理