React-Redux中Action无法修改状态求助（React 17.0.2）

1. Action Type 不匹配 #

你手动构造的action type是'login'，但Redux Toolkit的createSlice生成的action type格式为${sliceName}/${reducerName}。你的slice name是'login'，reducer函数名也是'login'，所以正确的action type应该是'login/login'。手动写的'login'无法触发对应的reducer，导致状态不更新。

2. 错误地手动修改组件state #

代码中that.state.loggedIn = true;属于直接修改React组件state，这违反了React的状态更新规则，而且这个状态应该由Redux统一管理，不需要手动修改组件state。

正确的实现方式 #

步骤1：使用自动生成的Action Creator

你已经通过export const { login, logout } = loginSlice.actions导出了自动生成的action creator，直接用它来dispatch action即可，避免手动构造action出错：

首先确保在dispatch的文件中导入login action：

import { login } from './path/to/loginSlice'; // 替换为你的loginSlice实际路径

然后修改dispatch代码：

.then((data) => {
  // 移除 that.state.loggedIn = true; 这行代码
  store.dispatch(login({
    email: that.state.email,
    token: data.token
  }));
  this.props.navigate('/admin/manage-indicator');
})

步骤2：确认Store配置正确

确保你的Redux Store已经正确注册了login reducer：

import { configureStore } from '@reduxjs/toolkit';
import loginReducer from './loginSlice'; // 替换为你的实际路径

export const store = configureStore({
  reducer: {
    login: loginReducer, // 这里的key要和后续用useSelector获取状态时的key一致
  },
});

步骤3：组件中获取Redux状态

后续在组件中需要获取登录状态时，使用useSelector（函数组件）或connect（类组件）从Redux Store中读取，而不是依赖组件自身state：

// 函数组件示例
import { useSelector } from 'react-redux';

function SomeComponent() {
  const { loggedIn, userEmail, token } = useSelector(state => state.login);
  // 使用这些状态进行业务逻辑处理
}

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