Typescript: hvordan man typificerer en brugerdefineret redux-middleware, der håndterer asynkrone handlinger

Jeg håber, at alle har det godt denne weekend!

ansvarsfraskrivelse: Jeg har allerede forsket hele dagen, og jeg kommer for at bede om hjælp først efter, at jeg har prøvet mange ting, jeg har åbnet mere end 20 StackOverflow-links og læst dem igennem...

Jeg har dette brugerdefinerede redux-middleware, som har til formål at fange løfter, der mislykkes, og afsende en handling for hver.

const errorMiddleware: Middleware =
  ({ dispatch }: MiddlewareAPI) =>
  (next: Dispatch) =>
  async (action: AnyAction) => {
    const { meta, payload } = action;
    const { withErrorHandler, defaultErrorCode } = meta;

    const isPromise = getIsPromise(payload);

    if (isPromise && withErrorHandler) {
      return next(action)
        .catch(errorHandler(defaultErrorCode))
        .catch((handledError: ISystemError) =>
          Promise.reject(
            handledError.shouldSkipHandleError
              ? handledError
              : dispatch(addError(handledError))
          )
        );
    }

    return next(action);
  };

problemet jeg prøver at løse er async (action: AnyAction) => {

Jeg får en fejlmeddelelse, der siger

Argument of type 'AsyncThunkAction<number, number, {}>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'AsyncThunkAction<number, number, {}>' but required in type 'AnyAction'.  TS2345

    53 |         <button
    54 |           className={styles.asyncButton}
  > 55 |           onClick={() => dispatch(incrementAsync(incrementValue))}
       |                                   ^
    56 |         >
    57 |           Add Async
    58 |         </button>

dette er fordi incrementAsync bruger createAsyncThunk fra '@reduxjs/toolkit';

export const incrementAsync = createAsyncThunk(
  'counter/fetchCount',
  async (amount: number) => {
    const response = await fetchCount(amount);
    // The value we return becomes the `fulfilled` action payload
    return response.data;
  }
);

Så jeg tror, jeg er nødt til at ændre den sidste funktion `async (action: AnyAction) => {` type af handling til noget andet, men jeg kan ikke finde ud af det, må jeg få oplysning fra dine ord?

her er et link til TypeScript-legeredet, hvis det hjælper

h

Svar #1

Prøv det med

const errorMiddleware: Middleware<{}, unknown, ThunkDispatch<unknown, unknown, AnyAction>> =
  ({ dispatch }) =>
  (next) =>
  async (action) => {

der er ingen grund til at skrive ting til venstre og højre for = - at skrive det på den ene side vil blive overført til den anden side.

Relaterede artikler