Redux中mapDispatchToProps传对象无效，authUser无法分发Action求助

看起来你的核心问题是Redux Thunk的使用方式不符合规范，导致异步操作完成后无法正确分发SET_CURRENT_USER action。我来一步步帮你排查和修正：

1. 核心问题：AuthUser函数不符合Thunk规范 #

Redux Thunk要求异步action creator必须返回一个接受dispatch和getState作为参数的函数，而不是直接调用dispatch。你的当前写法里，直接返回了dispatch(responseAnswer)，但responseAnswer是一个Promise对象，Thunk中间件无法识别并处理它，自然不会触发状态更新。

修正后的action/auth.js代码 #

// this will handle auth action
import apiCall from '../../services/api'
import {SET_CURRENT_USER} from '../actionTypes'

// 正确的Thunk action creator：返回一个接受dispatch的函数
function authUser(data){
  // Thunk会自动把dispatch传入这个函数
  return async (dispatch) => {
    try {
      const responseData = await apiCall("post", "/api/auth/logIn", data);
      // 异步请求成功后，手动分发action
      dispatch({ type: SET_CURRENT_USER, user: responseData });
      return responseData; // 可选，方便组件后续处理Promise
    } catch (err) {
      console.log(err.message);
      // 这里可以添加错误处理的action，比如SET_AUTH_ERROR
      throw err; // 可选，让组件能捕获错误
    }
  };
}

export default authUser;

2. 确认组件调用逻辑 #

在Main.js里你已经把authUser通过connect传递给了Auth组件，需要确保Auth组件里正确调用这个函数：

// 示例：Auth组件内的表单提交处理
const Auth = ({ authUser, heading, buttonText }) => {
  const [formData, setFormData] = useState({ email: '', password: '' });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await authUser(formData); // 调用Thunk action creator
      // 登录成功后的逻辑，比如跳转到首页
    } catch (err) {
      // 处理登录失败
    }
  };

  return (
    // 表单渲染逻辑...
  )
}

3. 验证Thunk中间件配置 #

最后要确认你的Redux Store已经正确配置了Thunk中间件，这是Thunk生效的前提：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // 必须添加这一行，否则Thunk不生效
);

总结修正点 #

• 把authUser改成返回异步函数的形式，让Thunk能接管异步逻辑
• 在异步请求成功后手动调用dispatch分发action
• 确保组件正确调用authUser并传递表单数据
• 确认Store已配置Thunk中间件

这样修改后，当用户输入正确的邮箱密码时，就能正常触发SET_CURRENT_USER action，更新Redux状态了。

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