98 lines
3.3 KiB
Markdown
98 lines
3.3 KiB
Markdown
# Redux 全局状态管理设置说明
|
||
|
||
## 📦 安装依赖
|
||
|
||
请手动运行以下命令安装 Redux 相关依赖：
|
||
|
||
```bash
|
||
cd frontend
|
||
npm install @reduxjs/toolkit react-redux
|
||
```
|
||
|
||
## ✅ 已完成的实现
|
||
|
||
### 1. Redux Store 结构
|
||
|
||
**文件**: `frontend/src/store/index.js`
|
||
- 配置了 Redux store
|
||
- 使用 `@reduxjs/toolkit` 的 `configureStore`
|
||
|
||
**文件**: `frontend/src/store/appSlice.js`
|
||
- 管理全局状态：
|
||
- `currentUser`: 当前登录用户
|
||
- `viewingUserId`: 管理员查看的用户ID
|
||
- `accountId`: 当前选中的账号ID
|
||
- `accounts`: 当前用户的账号列表
|
||
- `users`: 用户列表（管理员可见）
|
||
|
||
### 2. 已更新的组件
|
||
|
||
#### App.jsx
|
||
- ✅ 使用 `Provider` 包裹整个应用
|
||
- ✅ 使用 Redux hooks (`useSelector`, `useDispatch`)
|
||
- ✅ 用户切换逻辑使用 Redux actions
|
||
|
||
#### AccountSelector.jsx
|
||
- ✅ 完全使用 Redux 管理账号选择
|
||
- ✅ 用户切换时自动选择第一个 active 账号
|
||
- ✅ 账号切换时自动同步到 Redux store
|
||
|
||
#### StatsDashboard.jsx
|
||
- ✅ 使用 `useSelector(selectAccountId)` 获取当前账号ID
|
||
- ✅ 当 `accountId` 变化时自动重新加载数据
|
||
|
||
#### TradeList.jsx
|
||
- ✅ 使用 `useSelector(selectAccountId)` 获取当前账号ID
|
||
- ✅ 当 `accountId` 变化时自动重新加载数据
|
||
|
||
#### Recommendations.jsx
|
||
- ✅ 使用 `useSelector(selectAccountId)` 获取当前账号ID
|
||
- ✅ 当 `accountId` 变化时自动更新默认下单量
|
||
|
||
#### ConfigPanel.jsx
|
||
- ✅ 使用 Redux 获取 `accountId`, `currentUser`, `isAdmin` 等
|
||
- ✅ 移除了 localStorage 轮询和事件监听
|
||
- ✅ 当 `accountId` 变化时自动重新加载配置
|
||
|
||
#### GlobalConfig.jsx
|
||
- ✅ 使用 Redux 获取 `currentUser`, `isAdmin`
|
||
- ✅ 移除了 props 传递
|
||
|
||
## 🔄 工作流程
|
||
|
||
### 用户切换流程
|
||
1. 管理员点击切换用户
|
||
2. `App.jsx` 调用 `dispatch(switchUser(userId))`
|
||
3. Redux store 更新 `viewingUserId`
|
||
4. `AccountSelector` 监听到 `viewingUserId` 变化
|
||
5. 自动加载新用户的账号列表
|
||
6. 自动选择第一个 active 账号
|
||
7. Redux store 更新 `accountId`
|
||
8. 所有使用 `useSelector(selectAccountId)` 的组件自动重新渲染
|
||
9. 各组件在 `useEffect` 中检测到 `accountId` 变化，重新加载数据
|
||
|
||
### 账号切换流程
|
||
1. 用户在 `AccountSelector` 中选择账号
|
||
2. `AccountSelector` 调用 `dispatch(setAccountId(accountId))`
|
||
3. Redux store 更新 `accountId`
|
||
4. 所有使用 `useSelector(selectAccountId)` 的组件自动重新渲染
|
||
5. 各组件在 `useEffect` 中检测到 `accountId` 变化，重新加载数据
|
||
|
||
## 🎯 优势
|
||
|
||
1. **统一状态管理**: 所有用户和账号状态都在 Redux store 中
|
||
2. **自动同步**: 切换用户/账号后，所有页面自动更新
|
||
3. **响应式**: 使用 React hooks，状态变化自动触发重新渲染
|
||
4. **易于调试**: Redux DevTools 可以查看所有状态变化
|
||
5. **向后兼容**: 保留了自定义事件 (`ats:account:changed`)，确保旧代码仍能工作
|
||
|
||
## 📝 注意事项
|
||
|
||
1. **需要安装依赖**: 请运行 `npm install @reduxjs/toolkit react-redux`
|
||
2. **localStorage 同步**: Redux store 会自动同步到 localStorage，确保刷新后状态不丢失
|
||
3. **事件兼容**: 保留了 `ats:account:changed` 事件，但主要使用 Redux 状态管理
|
||
|
||
## 🚀 下一步
|
||
|
||
安装依赖后，系统将完全使用 Redux 管理用户和账号状态，切换用户/账号时所有页面会自动同步更新。
|