Actions must be plain objects. Use custom middleware for async actions. redux-thunk related

Question

I'm a redux beginner. I'm using redux-thunk, however, I'm only getting error from this function.

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

thanks for your help.

async return a promise. If you dont have have strong reason to use async just return the function . In the function you do async action and then dispatch the action. Problem here is you are not returning a function — simbathesailor

Michael Peyper Michael Peyper · Accepted Answer · 2017-11-26T09:14:00

The issue here is your use of async:

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

What this snippet is actually doing is creating an async arrow function, that never gets called as it is not being returned from the action creator (calling this action creator will just return undefined).

Fixing it can be achieved by either:

Adding in a return:

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

Or removing some braces:

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

Finally, it's worth considering if you actually need the async functionality here at all, as you don't appear to be creating a Promise (or at least awaiting one) in the thunk block.

Actions must be plain objects. Use custom middleware for async actions. redux-thunk related

1 Answers