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 3acc00ac8d
commit d5881462d2
10 changed files with 183 additions and 122 deletions

View File

@@ -1,110 +0,0 @@
// src/contexts/AuthModalContext.js
import { createContext, useContext, useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from './AuthContext';
import { logger } from '../utils/logger';
const AuthModalContext = createContext();
/**
* 自定义Hook获取弹窗上下文
*/
export const useAuthModal = () => {
const context = useContext(AuthModalContext);
if (!context) {
throw new Error('useAuthModal must be used within AuthModalProvider');
}
return context;
};
/**
* 认证弹窗提供者组件
* 管理统一的认证弹窗状态(登录/注册合并)
*/
export const AuthModalProvider = ({ children }) => {
const navigate = useNavigate();
const { isAuthenticated } = useAuth();
// 弹窗状态(统一的认证弹窗)
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
// 重定向URL认证成功后跳转
const [redirectUrl, setRedirectUrl] = useState(null);
// 成功回调函数
const [onSuccessCallback, setOnSuccessCallback] = useState(null);
/**
* 打开认证弹窗(统一的登录/注册入口)
* @param {string} url - 认证成功后的重定向URL可选
* @param {function} callback - 认证成功后的回调函数(可选)
*/
const openAuthModal = useCallback((url = null, callback = null) => {
setRedirectUrl(url);
setOnSuccessCallback(() => callback);
setIsAuthModalOpen(true);
}, []);
/**
* 关闭认证弹窗
* 如果用户未登录,跳转到首页
*/
const closeModal = useCallback(() => {
setIsAuthModalOpen(false);
setRedirectUrl(null);
setOnSuccessCallback(null);
// ⭐ 如果用户关闭弹窗时仍未登录,跳转到首页
if (!isAuthenticated) {
navigate('/home');
}
}, [isAuthenticated, navigate]);
/**
* 登录/注册成功处理
* @param {object} user - 用户信息
*/
const handleLoginSuccess = useCallback((user) => {
// 执行自定义回调(如果有)
if (onSuccessCallback) {
try {
onSuccessCallback(user);
} catch (error) {
logger.error('AuthModalContext', 'handleLoginSuccess', error, {
userId: user?.id,
hasCallback: !!onSuccessCallback
});
}
}
// ⭐ 登录成功后,只关闭弹窗,留在当前页面(不跳转)
// 移除了原有的 redirectUrl 跳转逻辑
setIsAuthModalOpen(false);
setRedirectUrl(null);
setOnSuccessCallback(null);
}, [onSuccessCallback]);
/**
* 提供给子组件的上下文值
*/
const value = {
// 状态
isAuthModalOpen,
redirectUrl,
// 打开弹窗方法
openAuthModal,
// 关闭弹窗方法
closeModal,
// 成功处理方法
handleLoginSuccess,
};
return (
<AuthModalContext.Provider value={value}>
{children}
</AuthModalContext.Provider>
);
};