React Redux已配置thunk类组件dispatch报错Actions must be plain objects问题问询

报错根因 #

你定义的bid action 加了async关键字，所有async函数默认返回Promise对象，哪怕内部return的是普通action对象，外层也会被Promise包裹，这就是报错的直接原因。
redux-thunk的作用是允许你dispatch一个函数（而非普通action对象），中间件会拦截该函数并传入dispatch/getState作为参数，你需要在函数内部完成异步逻辑后手动dispatch普通action对象。

修复步骤 #

1. 基础修复（适配你现有代码结构） #

你已经在组件内完成了异步请求拿到了用户数据，只需要把action里的async关键字删除即可，同时补全缺失的常量引入：

// action/auction.js 修复后代码
import { EDIT } from '../constants/actionTypes'; // 补上你缺失的常量引入

export const bid = (user) => ({
    type: EDIT,
    data: user
});

2. 额外语法错误修复 #

你当前的Landing组件代码中，componentDidMount生命周期被写在了constructor内部，会导致生命周期不触发、无法正确初始化user状态，需要调整位置：

// Landing.js 修正后代码片段
constructor(props) {
    super(props);
    this.state = {
        user: ''
    }
} // 新增constructor闭合花括号

componentDidMount() {
    this.setState({user: JSON.parse(localStorage.getItem('profile'))}) 
}

可选优化：把异步逻辑移到action中（更符合redux规范） #

如果你想统一维护异步逻辑，可以把请求逻辑封装到thunk action中：

// action/auction.js 优化后写法
import { EDIT } from '../constants/actionTypes';
import { loggedUser } from '../../api/index'; 

export const bid = (userData) => async (dispatch) => {
  const response = await loggedUser(userData);
  dispatch({
    type: EDIT,
    data: response
  })
}

对应的组件提交逻辑可以简化为：

// Landing.js handleFormSubmit 简化后代码
handleFormSubmit = async (e) => {
  e.preventDefault()
  const userData = {email: this.state.user.result.email, id: this.state.user.result._id}
  this.props.bid(userData)
}

修复完成后，所有通过connect订阅了bidReducer中authData的组件都会自动获取到最新的用户状态，无需额外操作。

内容的提问来源于stack exchange，提问作者jonny.vogel