使用Redux存储用户数据至localStorage遇登录失效及redux-thunk报错

报错原因 #

控制台的错误提示明确说明：Redux默认只能分发**纯对象（plain objects）**类型的action，但你在登录时分发了一个Promise。虽然你的Redux Store已经配置了redux-thunk中间件，但登录对应的action创建函数没有按照thunk的要求编写，导致异步请求的Promise被直接分发，而非通过thunk处理。

核心问题点 #

注册功能正常，说明注册的action是正确使用thunk的（返回一个函数而非直接返回Promise），但登录的action写法有误，直接返回了请求服务器的Promise，而非包裹成thunk函数。

解决方案 #

1. 修正登录的Action创建函数

确保登录action返回一个异步函数，在函数内部处理请求并分发正确的纯对象action：

// 正确的登录action写法示例
import axios from 'axios';

export const login = (loginData) => async (dispatch) => {
  // 分发请求开始的action
  dispatch({ type: "AUTH_START" });
  try {
    // 发送登录请求到服务器
    const response = await axios.post('/api/login', loginData);
    // 请求成功，分发成功action，reducer会自动存入localStorage
    dispatch({ type: "AUTH_SUCCESS", data: response.data });
  } catch (error) {
    // 请求失败，分发失败action
    dispatch({ type: "AUTH_FAIL" });
    console.error('登录失败:', error);
  }
};

错误的写法示例（直接返回Promise，需避免）：

// 错误写法
export const login = (loginData) => {
  return axios.post('/api/login', loginData).then(res => {
    return { type: "AUTH_SUCCESS", data: res.data };
  });
};

2. 确认组件中调用action的方式

在登录组件中，通过useDispatch获取dispatch函数，直接传入参数调用登录action：

// 登录组件中的调用示例
import { useDispatch } from 'react-redux';
import { login } from '../actions/authActions';

const LoginComponent = () => {
  const dispatch = useDispatch();

  const handleLogin = (formData) => {
    // 直接dispatch thunk函数，无需手动处理Promise
    dispatch(login(formData));
  };

  // ...其他组件代码
};

3. 验证Store配置（现有配置已正确，可跳过）

你的Redux Store已经正确配置了redux-thunk中间件，这部分无需修改：

// 你的Store代码已正确应用thunk
const store = createStore(
  reducers,
  persistedState,
  composeEnhancers(applyMiddleware(thunk))
);

额外检查点 #

• 确认登录接口返回的数据格式和注册接口一致，避免reducer处理action.data时出现异常。
• 检查登录组件是否正确阻止了表单默认提交行为，防止页面刷新导致状态丢失。

内容的提问来源于stack exchange，提问作者Md Firoz Mia