React Redux中LoadUser触发后login状态不更新问题求助

Redux store里的login值在登录、登出、注册环节都能正常更新，但调用LoadUser函数并触发LoadUserSuccess后，login值却没有变化。已经尝试过展开state的方式更新状态，仍然无效，希望明确问题原因。

相关代码 #

App.js #

import './App.css';    
import Login from './component/LoginRegis/login';
import Navbar from './component/Navbar/navbar';
import Footer from './component/Footer/footer';
import Book from './component/Book/book';
import { useEffect} from 'react';
import { useDispatch,useSelector } from "react-redux";
import { LoadUser} from "./Action/user"

function App() { 
  const dispatch = useDispatch();
  const isLogged = useSelector((state) => state.user.login);
  console.log(isLogged);

  useEffect(()=>{
    dispatch(LoadUser())
    },[dispatch])

  return (
    <div className="app">
    {isLogged && < Navbar/>}
    {isLogged && < Book />}
    {!isLogged && < Login/>}
    {isLogged &&< Footer/>}
     </div>
  );
}
export default App;

Redux Action 文件 #

import axios from "axios";

export const LoginUser = (email, password) => async (dispatch) => {
  try {
    dispatch({    
      type: "LoginRequest"
    })

    const data = await axios.post("api/v1/login/", {email, password}, {
      headers: {
        "content-type": "application/json",
      }
    });

    dispatch({
      type: "LoginSuccess",
      payload: data.user
    })
  } catch (error) {
    dispatch({
      type: "LoginFailure",
      payload: error
    })
  }    
};

export const RegisterUser = (userDetails) => async (dispatch) => {
  try {
    dispatch({
     type: "RegisterRequest"
    })

    const data = await axios.post("api/v1/register/", {userDetails}, {
      headers: {
        "content-type": "application/json",
      }
    });

    dispatch({
      type: "RegisterSuccess",
      payload: data.user
    })
  } catch (error) {
    dispatch({
      type: "RegisterFailure",
      payload: error
    })
  }
};

export const LoadUser = () => async (dispatch) => {
  try {
    dispatch({
      type: "LoadUserRequest",
    });

    const { data } = await axios.get("api/v1/me/");

    dispatch({
      type: "LoadUserSuccess",
      payload: data.user,
    });
  } catch (error) {
    dispatch({
      type: "LoadUserFailure",
      payload: error.response.data.message,
    });
  }
};

export const LogoutUser = () => async (dispatch) => {
  try {
    dispatch({
      type: "LogoutUserRequest",
    });

    await axios.get("api/v1/logout/");

    dispatch({
      type: "LogoutUserSuccess"
    });
  } catch (error) {
    dispatch({
      type: "LogoutUserFailure",
      payload: error.response.data.message,
    });
  }   
};

Reducer（user.js） #

import { createReducer } from "@reduxjs/toolkit";
const initialState={login :false}
export const userReducer =  createReducer(initialState,{
    RegisterRequest:(state)=>{
        state.loading = true
    },
    RegisterSuccess:(state, action)=>{
        state.loading = false
        state.user = action.payload
    },    
    RegisterFailure:(state, action)=>{
        state.loading = false
        state.error = action.payload
    },
    LoginRequest:(state)=>{
        state.loading = true
        state.login = false
    },
    LoginSuccess:(state, action)=>{
        state.loading = false
        state.login = true
        state.user = action.payload
    },
    LoginFailure:(state, action)=>{
        state.loading = false;
        state.login = false;
        state.error = action.payload
    },
    LoadRequest:(state)=>{
        state.loading = true
    },
    LoadSuccess:(state, action)=>{
        state.loading = false;
        state.login= true;
        state.user = action.payload
    },
    LoadFailure:(state, action)=>{
        state.loading = false
        state.login= false;
        state.error = action.payload 
    }, 
    LogoutUserRequest: (state) => {
        state.loading = true;
      },
    LogoutUserSuccess: (state) => {
        state.loading = false;
        state.login = false;
        state.user = null;
      },
    LogoutUserFailure: (state, action) => {
        state.loading = false;
        state.login = true;
        state.error = action.payload;
      },
    clearErrors: (state) => {
        state.error = null;
      }
})

store.js #

import {configureStore}from "@reduxjs/toolkit"
import { userReducer } from "./Reducer/User"
const store =configureStore({
    reducer:{ user : userReducer}
})
export default store;

尝试过的无效写法 #

state = {
           ...state,
           loading = false,
           login = true, 
           user = action.payload
          }

问题原因 #

核心问题是Action定义的type与Reducer监听的type不匹配：

• LoadUser Action中，请求、成功、失败对应的type是LoadUserRequest、LoadUserSuccess、LoadUserFailure
• 但userReducer里监听的却是LoadRequest、LoadSuccess、LoadFailure，名称不一致导致Reducer无法捕获LoadUser相关的Action，自然不会更新login状态。

另外你尝试的展开state写法存在语法错误：对象属性赋值应该用冒号:而非等号=，正确写法应为：

return {
  ...state,
  loading: false,
  login: true,
  user: action.payload
}

不过因为type不匹配的核心问题，这个写法即使语法正确也不会生效。

解决方案 #

修改userReducer中的type名称，与Action中的保持一致：

export const userReducer = createReducer(initialState, {
  // ...其他代码不变
  LoadUserRequest:(state)=>{
      state.loading = true
  },
  LoadUserSuccess:(state, action)=>{
      state.loading = false;
      state.login= true;
      state.user = action.payload
  },
  LoadUserFailure:(state, action)=>{
      state.loading = false
      state.login= false;
      state.error = action.payload 
  },
  // ...其他代码不变
})

这样当LoadUser Action触发LoadUserSuccess时，Reducer就能正确捕获并更新login状态。

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