reactjs - 当调度到另一个在 redux 中减少时状态值不会改变

Question

我正在构建登录系统。当我使用选择器函数时，我在存储状态值时遇到问题。在我的系统中，我想从存储状态值获取 isSuccess、error、userInfo

/login/index.js

const userLogin = useSelector((state) => state.userLogin);
console.log(userLogin);
const { isSuccess, error, userInfo } = userLogin;

如果出现错误，则会在 UI 上显示错误消息，否则如果 isSuccess，则会显示成功消息。 isSuccess 当发布到 api 成功时出现(这意味着用户登录成功)并且用户数据被分派(dispatch)到 loginSuccess 减少，否则分派(dispatch)到 loginFail 的错误值减少

/action/userAction.js

import {
loginSuccess,
loginFail,
} from "\~/redux/user/userLoginSlice";

export const login = (inputs) =\> async (dispatch) =\> {
try {
const {data} = await request.post("/auth/login", inputs);
dispatch(loginSuccess(data));
localStorage.setItem("userInfo", JSON.stringify(data));
} catch (error) {
console.log(error.response.data)
dispatch(loginFail(error.response.data))
}

。然而，当上一次登录为loginFail时，它不仅会在loginSucces减少中获取isSuccess，还会收到错误 console.log(userLogin) 。它应该只显示 userInfo 和 isSuccess。任何人都可以帮我解决这个问题。这减少了

userLoginSlice.js

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


const userLoginSlice = createSlice({
    name: 'userInfo',
    initialState: {},
    reducers: {
        loginSuccess: (state, action) => {
            state.isSuccess = true;
            state.userInfo = action.payload;
        },
        loginFail: (state, action) => {
            state.error = action.payload
        },
    },
});

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

export default userLoginSlice.reducer;

和我的reduce商店

store.js

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

import productModalReducer from './product-modal/productModalSlice';
import cartItemsSlice from './cart/cartSlide';
import userLoginSlice from './user/userLoginSlice.js';
import userRegisterSlice from './user/userRegisterSlice.js';
import userUpdateSlice from './user/userUpdateSlice.js';

const userInfoFromStorage = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null;

const initialState = {
    userLogin: { userInfo: userInfoFromStorage },
};

export const store = configureStore({
    reducer: {
        productModal: productModalReducer,
        cartItems: cartItemsSlice,
        userLogin: userLoginSlice,
        userRegister: userRegisterSlice,
        userUpdate: userUpdateSlice,
    },
    preloadedState: initialState,
});

当调度到另一个在 redux 中减少时，状态值不会改变

Answer 1

这似乎可能是因为 loginSuccess 仅将 userInfo 和 isSuccess 添加到状态，但没有忽略之前的 error.

也许尝试重置状态值以排除 reducer 中的错误:

const userLoginSlice = createSlice({
  name: "userInfo",
  initialState: {},
  reducers: {
    loginSuccess: (state, action) => {
      // 👇 Reset state to omit error message in loginSuccess
      state = { isSuccess: true, userInfo: action.payload };
    },
    loginFail: (state, action) => {
      // 👇 Could add "isSuccess: false, userInfo: null" if needed
      state = { error: action.payload };
    },
  },
});

或者返回一个状态值而不是使用 Immer 代理状态:

const userLoginSlice = createSlice({
  name: "userInfo",
  initialState: {},
  reducers: {
    loginSuccess: (state, action) => {
      // 👇 Reset state to omit error message in loginSuccess
      return { isSuccess: true, userInfo: action.payload };
    },
    loginFail: (state, action) => {
      // 👇 Could add "isSuccess: false, userInfo: null" if needed
      return { error: action.payload };
    },
  },
});