Redux Subscribe失效致Header/Footer不显示及初始渲染用户信息异常

你的核心问题出在Redux reducer处理登录/注册动作时，只更新了token但没有同步更新user字段，同时初始渲染的状态同步逻辑有冗余，具体拆解和修复步骤如下：

1. 核心问题：Redux状态更新不完整 #

看你的authReducer代码，在login和register分支里，仅给newState.token赋值了新的token，但没有像AuthState构造函数那样解码token并更新user字段。这会导致：

• 页面刷新时，AuthState构造函数读取localStorage的token并解码出user，此时store里的user是正确的
• 登录后直接dispatch动作时，store的token更新了，但user仍为null，因为reducer没处理这一步

2. 次要问题：Layout组件状态同步冗余 #

你的useEffect里重复调用了两次setUser(authStore.getState().user)，虽不影响功能，但逻辑冗余。

修复步骤 #

第一步：修复Redux Reducer #

修改authReducer中login/register分支的代码，添加解码token更新user的逻辑：

case AuthActionType.login:
case AuthActionType.register:
    newState.token = action.payload;
    localStorage.setItem("token", newState.token);
    // 新增：解码token并更新user
    const container: { user: UserModel } = jwtDecode(newState.token);
    newState.user = container.user;
    break;

第二步：简化Layout组件的状态同步 #

去掉useEffect中重复的setUser调用，保持逻辑简洁：

useEffect(() => {
    // 初始同步一次状态
    setUser(authStore.getState().user);

    const unsubscribe = authStore.subscribe(() => {
        const updatedUser = authStore.getState().user;
        setUser(updatedUser);
    });

    return () => unsubscribe();
}, []);

第三步：移除冗余的localStorage操作 #

你的sendCredentials函数中，reducer已经处理了localStorage的设置，可去掉这里的重复操作：

async function sendCredentials(credentials: CredentialsModel): Promise<void> {
    try {
        const result = await axios.post('http://localhost:4004/api/auth/login', credentials);
        const token = result.data;
        // 移除这一行：localStorage.setItem("token", token)
        authStore.dispatch({type: AuthActionType.login, payload: token});
    } catch (error:any) {
        console.log(error.message);
        throw error;
    }
}

额外说明 #

修复后，登录dispatch动作时，reducer会同时更新token和user，store的subscribe会触发Layout组件更新user状态，Header和Footer就能正确显示。如果footer仍不显示，检查hideHeaderPaths的路径匹配是否正确，以及Layout的CSS布局（比如grid布局是否导致footer被隐藏）。

内容的提问来源于stack exchange，提问作者Ravid Goren