Redux-toolkit: Typescript createAsyncThunk deconstructing signal but property 'abort' does not exist on type

[joshuarize]

I have a simple call that follows the tutorial on aborting axios requests:

export const fetchAllSkills = createAsyncThunk(
  'listing/fetchAllSkillsStatus',
  async (_: void, { signal }) => {
    const source = axios.CancelToken.source();
    signal.addEventListener('abort', () => {
      source.cancel();
    });
    const response = await getAllSkills({ cancelToken: source.token });
    return response.data;
  },
);

and in my component:

useEffect(() => {
    const dispatchFetchAllSkills = dispatch(fetchAllSkills());

    return () => {
      dispatchFetchAllSkills.abort();
    };
  }, [dispatch]);

But I have a red underline on abort():

Property 'abort' does not exist on type '(dispatch: ThunkDispatch<unknown, unknown, AnyAction>, getState: () => unknown, extra: unknown) => Promise<PayloadAction<any, string, { arg: void; requestId: string; }, never> | PayloadAction<...>> & { ...; }'.ts(2339)

I've tried adding { signal }: { signal: AbortSignal } to the parameter but the same error occurs.

[phryneas]

Your dispatch is not properly typed and does not contain the ThunkMiddleware dispatch signature.
As useDispatch is not from RTK, but from react-redux, we cannot do that for you and you have to do so yourself.

See
https://react-redux.js.org/using-react-redux/static-typing#typing-the-usedispatch-hook