使用Redux Store与Reducer实现登录登出时页面未更新问题排查

嘿，我帮你找出问题啦！你的Redux登出后组件没更新，主要是三个关键错误，我一步步给你讲清楚并修复：

1. CombineReducer配置完全错了！ #

你现在把一个返回false的普通函数userIdLogedIn当成了reducer放到了combineReducers里，而真正处理登录状态的userReducer却被放到了userReducer这个key下。这就导致你在mapToProb里取的state.userIdLogedIn根本不是由登录登出action管理的状态，自然dispatch后组件不会更新。

2. Reducer返回状态的顺序搞反了 #

在userReducer里，你写的是return { userIdLogedIn: true, ...state };——这会让state里的旧属性覆盖你刚设置的userIdLogedIn（因为展开操作在后面），等于白设置了！应该反过来，先展开旧state，再覆盖新属性。

3. 多余的userIdLogedIn函数 #

那个export function userIdLogedIn() { return false; }完全没用，直接删掉就行，reducer的初始状态应该在reducer内部设置。

修正后的代码如下： #

User模块代码：

// 删掉那个没用的userIdLogedIn函数
export function userReducer(state = { userIdLogedIn: false }, action) {
    console.log(action);
    switch (action.type) {
        case "LOGIN":
            return { ...state, userIdLogedIn: true }; // 先展开旧状态，再覆盖新属性
        case "LOGOUT":
            return { ...state, userIdLogedIn: false };
        default:
            return state; // 默认直接返回原状态，避免不必要的对象创建
    }
}

CombineReducer代码：

import { combineReducers } from 'redux'
import favoritsReducer from './Favorits'
import { userReducer} from './User' // 只导入真正的userReducer
const allReducer = combineReducers({
    favorits: favoritsReducer,
    user: userReducer, // 用user作为key，管理用户状态分支
});
export default allReducer;

App组件里的mapToProb函数：

function mapToProb(state) {
    // 现在从state.user分支里取userIdLogedIn
    return { userIdLogedIn: state.user.userIdLogedIn }
}

为什么这样改就好了？ #

• 现在userReducer专门管理state.user这个状态分支，初始状态就是{ userIdLogedIn: false }，符合你的需求。
• 当你dispatchLOGIN或LOGOUT时，userReducer会返回新的状态对象，combineReducers会更新state.user，然后mapToProb就能正确拿到最新的登录状态，组件自然会重新渲染了。
• 最后别忘了确保你的store是用这个修正后的allReducer创建的哦！

内容的提问来源于stack exchange，提问作者Alen.Toma