Redux登录模块状态异常：切换Reducer时旧状态未清除求助

问题核心：登录失败后再成功，state.userLogin中仍保留之前的error字段；反之，登录成功后再失败，也会残留isSuccess和userInfo字段，导致UI逻辑判断出错。

原因分析 #

Redux Toolkit的createSlice依赖Immer库处理状态更新，默认是在原有state对象基础上做修改（而非替换整个state）。你的loginSuccess仅设置isSuccess和userInfo，未清除旧的error字段；loginFail仅设置error，未清除isSuccess和userInfo，所以旧字段会持续留在state中。

解决方案 #

两种修改方式任选其一即可：

方式1：在reducer中清除无关字段

直接在每个action对应的reducer里删除不需要的旧字段：

import { createSlice } from '@reduxjs/toolkit';

const userLoginSlice = createSlice({
    name: 'userInfo',
    initialState: {},
    reducers: {
        loginSuccess: (state, action) => {
            // 清除登录失败时的错误字段
            delete state.error;
            state.isSuccess = true;
            state.userInfo = action.payload;
        },
        loginFail: (state, action) => {
            // 清除登录成功时的状态和用户信息
            delete state.isSuccess;
            delete state.userInfo;
            state.error = action.payload;
        },
    },
});

export const { loginSuccess, loginFail } = userLoginSlice.actions;
export default userLoginSlice.reducer;

方式2：返回全新的state对象

通过返回新对象直接覆盖原有state，旧字段会被完全替换：

import { createSlice } from '@reduxjs/toolkit';

const userLoginSlice = createSlice({
    name: 'userInfo',
    initialState: {},
    reducers: {
        loginSuccess: (state, action) => {
            // 返回仅包含成功状态的新对象
            return {
                isSuccess: true,
                userInfo: action.payload
            };
        },
        loginFail: (state, action) => {
            // 返回仅包含错误信息的新对象
            return {
                error: action.payload
            };
        },
    },
});

export const { loginSuccess, loginFail } = userLoginSlice.actions;
export default userLoginSlice.reducer;

额外优化：添加登录重置action #

如果需要处理退出登录场景，可新增loginResetaction将状态重置为初始值：

// 在userLoginSlice的reducers中添加
loginReset: (state) => {
    return {};
}

退出登录时调用：

localStorage.removeItem('userInfo');
dispatch(loginReset());

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