从thunk捕获错误到功能组件的反应

Question

如何从thunk中的异步方法中捕获错误？ 例如，我有以下thunk：

export const updateCostCenter = (data: Record<string, unknown>) => async (dispatch: Dispatch<IWorkforceState>) => {
  dispatch(requestUpdateCostCenter());

  return api('put', `${costCenterUrl}/${data.rowId}`, data)
    .then(response => {
      return dispatch(receiveUpdateCostCenter(response.data));
    })
    .catch(err => {
      return dispatch(errorUpdateCostCenter(err.response?.data?.description));
    });
};

在功能组件中，以下调用thunk的异步方法：

 props.updateCostCenter(valueToSubmit).then(
        () => {
          props.showToastNotification('success', 'Successful', props.translate('cost_center_successfully_updated'));
          AmplitudeService.logEvent(props.translate('edit_cost_center'));
          props.hideDialog();
          resetForm();
          setSubmitting(false);
          if (props.loadData) {
            props.loadData();
          }
          return
        }
      ).catch(() => {
        props.showToastNotification('error', 'Error', props.translate('cost_center_update_error'))
      });

不幸的是，我不知道为什么在错误的情况下它不会从功能组件中输入捕获量。我尝试添加投掷typeerror（）在派遣错误操作后，它有效，但是Thunk单元测试在管道上失败。

这是测试：

 it('update cost center success', function() {
    mockAdd.mockImplementation(
      () =>
        Promise.resolve({
            data: costCenter,
          } as any)
    );

    const expectedActions = [
      { type: WorkforceActions.REQUEST_UPDATE_COST_CENTER },
      { type: WorkforceActions.RECEIVE_UPDATE_COST_CENTER, costCenter },
    ];

    store.dispatch(updateCostCenter({ data: costCenter }) as any).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
      expect(api).toHaveBeenCalled();
      return
    }).catch((unexpectedErr: any) => console.log(`Unexpectedly rejected promise ${unexpectedErr}`));
  });

  it('update cost center error', function() {
    mockAdd.mockImplementation(
      () =>
        Promise.reject({
            response: { data: { description: 'dummy-message' } },
          } as any)
    );

    const expectedActions = [
      { type: WorkforceActions.REQUEST_UPDATE_COST_CENTER },
      { type: WorkforceActions.ERROR_UPDATE_COST_CENTER, message: 'dummy-message' },
    ];

    store.dispatch(updateCostCenter({ data: costCenter }) as any).catch(() => {
      expect(store.getActions()).toEqual(expectedActions);
      expect(api).toHaveBeenCalled();
    });
  });

Answer 1

因为您没有返回错误。

export const updateCostCenter = (data: Record<string, unknown>) => async (dispatch: Dispatch<IWorkforceState>) => {
  dispatch(requestUpdateCostCenter());

  return api('put', `${costCenterUrl}/${data.rowId}`, data)
    .then(response => {
      dispatch(receiveUpdateCostCenter(response.data));
      return response;
    })
    .catch(err => {
      dispatch(errorUpdateCostCenter(err.response?.data?.description));
      throw err; // or throw new Error();
    });
};