是否可以使用带有 createAsyncThunk 的外部 axios 处理程序

Question

I have a API handler with different functions using Axios for get, post, patch, etc. I want to use those API handler with createAsyncThunk from redux toolkit, is this possible?

it would be something like

export const paymentMethods = createAsyncThunk(
  'tenants/payments',
  async (ppp: any, { dispatch, getState }) => {
    const x = await postRequest(
      `${API.TENANTS}/${ppp.tenantId}/${API.PAYMENT_METHODS}`,
      response => console.log(response),
      ppp.data,
    );
    return x.data;
  },
);

The thing here is that createAsyncThunk handles rejected, fulfilled and pending response promises but if I use this configuration it will always return fulfilled even though the call actually fails.

Answer 1

You can use unwrap function to make createAsyncThunk return errors in the catch statement. Check the following example.

Without unwrap() :

  dispatch(paymentMethods())
    // By default, dispatching asyncThunks never results in errors (errors are just saved at redux)
    .then((result) => {
      /*
        Here you can access the result (success or error) of the asyncThunk.
        If we don't use 'unwrap', error (if happens) will be returned here as:
        {
          error: {name: "AxiosError", message: "Request failed with status code 401", code: "ERR_BAD_REQUEST"}
          meta: {arg: {…}, requestId: "3eIa5l0L3J12ADFrkxirt", rejectedWithValue: false, requestStatus: "rejected", aborted: false, …}
          payload: undefined
          type: "tenants/payments/rejected"
        }
      */
      console.log(`PaymentMethods result (success or error): `, result)
    })
    .catch((error) => {
      // This WILL NEVER be reached
    })

With unwrap() :

  dispatch(paymentMethods())
    // Using 'unwrap', the internal logic of the reducer doesnt change. 
    // But you can access the error in the 'catch' statement. 
    .unwrap()
    .then((result) => {
      // Here you can access the success result of the asyncThunk.
      console.log(`PaymentMethods result (success): `, result)
    })
    .catch((error) => {
      /*
        Here you can access the error result of the asyncThunk. Example:
        {
          code: "ERR_BAD_REQUEST"
          message: "Request failed with status code 401"
          name: "AxiosError"
        }
      */
      console.log(`PaymentMethods result (error): `, error)
    })