Как обработать ошибку от createAsyncThunk в Redux toolkit?

Question

[Данил Волконеско]

Есть createAsyncThunk запрос на создание заказа. При отправки заказа я специально сделал ошибку в отправляемых данных для получения ошибки (сервер обрабатывает инфу и так как там неподходящие данные выдает ошибку, но не в этом суть) .

const fetchOrderCreate = createAsyncThunk<void, Partial<IOrder>, { rejectValue: any, state: { userReducer: IUserState, cartReducer: ICartState, orderCreateReducer: IOrderCreate } }>(
  'order/fetchOrderCreate',
  async (formData, { rejectWithValue, getState }) => {
    try {
      const { userReducer, cartReducer, orderCreateReducer } = getState();
      const orderDto = new OrderDto(cartReducer, userReducer, formData, orderCreateReducer)
      const response = await $api.post('api/order/create', orderDto.order);
      return response.data;
    } catch (error: any) {
      if (error.response && error.response.data.message) {
        return rejectWithValue(error.response.data.message);
      } else {
        return rejectWithValue(error.message);
      }
    }
  }
)

Так же я добавил extraReducers (но пробовал и без него и без rejectWithValue.

builder
            .addCase(fetchOrderCreate.pending, (state) => {
                state.orderError = false;
                state.orderCreateLoadProcess = true;

            })
            .addCase(fetchOrderCreate.fulfilled, (state) => {
                state.orderError = false;
                state.orderCreateLoadProcess = false;
            })
            .addCase(fetchOrderCreate.rejected, (state) => {
                state.orderError = true;
                state.orderCreateLoadProcess = false;
            })

А ниже код в компоненте React где вызывается данный запрос:

const callback = async () => {
        try {
            await dispatch(fetchOrderCreate({...formData, type: 'pickup'}));
            enqueueSnackbar('Заказ отправлен, оператор перезвонит для подтверждения в течении 5 минут!', { variant: 'success' });
        } catch (e) {
            enqueueSnackbar('Ошибка создания заказа, попробуйте позднее', { variant: 'error' });
        }

        success();
    }

Вопрос: почему после запроса в блоке try

await dispatch(fetchOrderCreate({...formData, type: 'pickup'}));

Выполнение кода продолжается как ни в чем не бывало, и не попадает в блок catch. При этом для теста вставлял console log после запроса чтобы увидеть ответ, и там приходит значение rejected.
Как поступить в этой ситуации, нужно при успешном выполнении запроса чтобы вызывалась одна функция, а при ошибке мне нужна другая функция, и чтобы выполнение дальнейшего кода приостанавливалось.

К примеру в mobX есть возможность делать так:

fetchOrderCreate(
    onSuccess => {},
    onError => {}
  )

Что позволяло выполнить определенные действие после запроса.

Answer 1

[Алексей]

Вопрос: почему после запроса в блоке try
await dispatch(fetchOrderCreate({...formData, type: 'pickup'}));
Выполнение кода продолжается как ни в чем не бывало, и не попадает в блок catch.

Потому что, если почитать документацию, то там будет написано, что createAsyncThunk всегда возвращает resolved промис, даже при ошибке. А чтобы возвращалась оригинальная ошибка нужно дополнительно вызвать unwrap:

await dispatch(fetchOrderCreate({...formData, type: 'pickup'})).unwrap();

Comments

[Данил Волконеско]

Спасибо помог, я читал документацию и пробовал уже использовать unwrap, но видимо где то допустил ошибку в прошлый раз поэтому не сработало. Но сейчас все хорошо.