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:
@@ -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({
|
||||
|
||||
56
src/store/slices/authModalSlice.js
Normal file
56
src/store/slices/authModalSlice.js
Normal 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;
|
||||
Reference in New Issue
Block a user