# 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 管理用户和账号状态，切换用户/账号时所有页面会自动同步更新。