动作必须是普通对象。使用自定义中间件进行异步操作。 redux-thunk 相关

【问题标题】：Actions must be plain objects. Use custom middleware for async actions. redux-thunk related动作必须是普通对象。使用自定义中间件进行异步操作。 redux-thunk 相关
【发布时间】：2018-05-09 05:33:07
【问题描述】：

我是一个 redux 初学者。我正在使用 redux-thunk，但是，我只是从这个函数中得到错误。

Error: Actions must be plain objects. Use custom middleware for async actions.
 this.props.sendPaypalOrderToFirebase(body)



export const sendPaypalOrderToFirebase = (orderInfo) => {
  async (dispatch, getState) => {
    database.ref('paypalOrders/' + uuid()).set({
      orderInfo
    });
    return dispatch(paypalOrderFirebaseSuccess(orderInfo))
  }
}

export const createOrder = (paymentMethod, paymentData) => ({
  type: actionTypes.CREATE_ORDER,
  paymentMethod,
  paymentData
});
export const paypalOrderFirebaseSuccess = (orderInfo) => ({
  type: actionTypes.PAYPAL_ORDER_FIREBASE_SUCCESS,
  orderInfo
})

感谢您的帮助。

【问题讨论】：

异步返回一个承诺。如果您没有充分的理由使用异步，只需返回该函数。在函数中执行异步操作，然后分派操作。这里的问题是你没有返回一个函数

标签： reactjs redux redux-thunk

【解决方案1】：

这里的问题是你对async的使用：

export const sendPaypalOrderToFirebase = (orderInfo) => {
  async (dispatch, getState) => {
    // ...
  }
}

这个 sn-p 实际上在做的是创建一个异步箭头函数，它永远不会被调用，因为它没有从动作创建者返回（调用这个动作创建者只会返回 undefined）。

可以通过以下任一方式修复它：

添加return:

export const sendPaypalOrderToFirebase = (orderInfo) => {
  return async (dispatch, getState) => {
    // ...
  }
}

或者去掉一些大括号：

export const sendPaypalOrderToFirebase = (orderInfo) => async (dispatch, getState) => {
    // ...
}

最后，值得考虑的是您是否真的需要 async 功能，因为您似乎没有在 thunk 块中创建 Promise（或至少 awaiting 一个）。

【讨论】：