動作必須是普通對象。 使用自定義中間件進行異步操作。 redux-thunk相關

Question

我是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
})

謝謝你的幫助。

Answer 1

這里的問題是您對async的使用：

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

該代碼段的實際作用是創建一個異步箭頭函數，該函數永遠不會被調用，因為它不是從動作創建者返回的（調用此動作創建者只會返回undefined ）。

可以通過以下任一方法解決此問題：

1. 添加return ：

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

2. 或刪除一些括號：

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

最后，值得考慮的是，您是否真的需要async功能，因為您似乎沒有在thunk塊中創建Promise （或至少await一個）。