React Redux依赖变更时useEffect未触发导航栏更新排查

核心问题原因 #

问题由两处代码错误共同导致：

• Reducer逻辑写错：SET_CURRENT_USER的处理逻辑没有直接更新用户状态，而是把传入的用户信息塞到了状态的q字段下。哪怕登出时传入空对象{}，最终存到store里的状态是{ q: {} }，始终不是真正的空对象。
• 空状态判断逻辑错误：你用currentUser.length == 0判断对象是否为空，但JS普通对象没有length属性，这个判断条件永远不会成立，哪怕真的拿到空对象也会走到管理员导航分支。
• 额外的本地状态冗余：NavBar里单独用useState存currentView本身就容易和Redux状态不同步，完全没必要多这一层状态。

分步修复方案 #

1. 修正Reducer的状态更新逻辑 #

把用户状态直接替换为传入的payload，不要额外嵌套q字段，修改reducers.js：

import { combineReducers } from "@reduxjs/toolkit";
import actionTypes from "./actionTypes";

export function currentUser(state = {}, action) {
    switch (action.type) {
        case actionTypes.SET_CURRENT_USER:
            // 直接返回传入的用户值作为新状态，不要嵌套q字段
            return action.payload;
        default:
            return state
    }
}

export default combineReducers({
    currentUser
});

2. 简化NavBar组件，修正空值判断 #

去掉冗余的本地状态和useEffect，直接根据Redux里的currentUser计算要渲染的导航，同时用正确的空对象判断方式，修改NavBar.js：

import React from "react";
import { useSelector } from "react-redux";
import NavBarAdmin from "./NavBarAdmin";
import NavBarAnonymous from "./NavBarAnonymous";

function NavBar() {
    const currentUser = useSelector((state) => state.currentUser);
    // 正确判断空对象：对象存在且自身可枚举属性长度大于0才是已登录状态
    const isLoggedIn = currentUser && Object.keys(currentUser).length > 0;

    return(
        <>
            {isLoggedIn ? <NavBarAdmin/> : <NavBarAnonymous/>}
        </>
    )
}
export default NavBar;

3. 原有登出逻辑无需修改 #

你之前写的dispatch(setCurrentUser({}))逻辑是对的，改完上面两处代码后，登出时store会正确把currentUser更新为空对象，组件会自动重渲染切换到匿名导航栏。

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