feat: 将 AuthModalProvider 迁移到 Redux

## 主要改动

### 新增
- 创建 `store/slices/authModalSlice.js` - Redux Slice 管理认证弹窗状态
- 创建 `hooks/useAuthModal.js` - 自定义 Hook,组合 Redux 状态和业务逻辑

### 修改
- 更新 `store/index.js` - 添加 authModal reducer
- 更新 `App.js` - 移除 AuthModalProvider 包裹层
- 更新 5 个组件的 import 路径:
  - AuthFormContent.js
  - AuthModalManager.js
  - WechatRegister.js
  - HomeNavbar.js
  - ProtectedRoute.js

### 删除
- 删除 `contexts/AuthModalContext.js` - 旧的 Context 实现

## 迁移效果

-  减少 Provider 嵌套层级(4层 → 3层)
-  统一状态管理架构(Redux)
-  更好的调试体验(Redux DevTools)
-  保持 API 兼容性(无破坏性修改)

## 技术细节

- 使用 `useRef` 存储 `onSuccessCallback`(函数不可序列化)
- 保持与 AuthContext 的依赖关系(AuthProvider 暂未迁移)
- 所有业务逻辑保持不变,仅改变状态管理方式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-10-30 13:22:45 +08:00
parent 795e404fdd
commit ff573e4eef
10 changed files with 183 additions and 122 deletions

View File

@@ -4,6 +4,7 @@ import communityDataReducer from './slices/communityDataSlice';
import posthogReducer from './slices/posthogSlice';
import industryReducer from './slices/industrySlice';
import stockReducer from './slices/stockSlice';
import authModalReducer from './slices/authModalSlice';
import posthogMiddleware from './middleware/posthogMiddleware';
export const store = configureStore({
@@ -12,6 +13,7 @@ export const store = configureStore({
posthog: posthogReducer, // ✅ PostHog Redux 状态管理
industry: industryReducer, // ✅ 行业分类数据管理
stock: stockReducer, // ✅ 股票和事件数据管理
authModal: authModalReducer, // ✅ 认证弹窗状态管理
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({

View File

@@ -0,0 +1,56 @@
// src/store/slices/authModalSlice.js
// 认证弹窗状态管理 Redux Slice - 从 AuthModalContext 迁移
import { createSlice } from '@reduxjs/toolkit';
import { logger } from '../../utils/logger';
/**
* AuthModal Slice
* 管理统一的认证弹窗状态(登录/注册合并)
*/
const authModalSlice = createSlice({
name: 'authModal',
initialState: {
isOpen: false, // 弹窗开关状态
redirectUrl: null, // 认证成功后的重定向URL可选
},
reducers: {
/**
* 打开认证弹窗
* @param {object} action.payload - { redirectUrl?: string }
*/
openModal: (state, action) => {
state.isOpen = true;
state.redirectUrl = action.payload?.redirectUrl || null;
logger.debug('authModalSlice', '打开认证弹窗', {
redirectUrl: action.payload?.redirectUrl || '无'
});
},
/**
* 关闭认证弹窗
*/
closeModal: (state) => {
state.isOpen = false;
state.redirectUrl = null;
logger.debug('authModalSlice', '关闭认证弹窗');
},
/**
* 设置重定向URL不打开弹窗
*/
setRedirectUrl: (state, action) => {
state.redirectUrl = action.payload;
},
},
});
// 导出 actions
export const { openModal, closeModal, setRedirectUrl } = authModalSlice.actions;
// 导出 selectors
export const selectAuthModalOpen = (state) => state.authModal.isOpen;
export const selectRedirectUrl = (state) => state.authModal.redirectUrl;
// 导出 reducer
export default authModalSlice.reducer;