Typescript error when dispatching thunks

[omniphx]

I'm in the process of upgrading our codebase to RTK v2.0 and running into an Typescript error when I try to pass my thunk into a dispatch method. Looks like dispatch only accepts UnknownAction. Is there a different way to implement thunks now?

See the comments at the bottom for the error I'm getting:

import { configureStore, createAsyncThunk } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {},
});

interface MyData {
  h: string;
}

const fetchUserById = createAsyncThunk(
  'users/fetchById',
  // Declare the type your function argument here:
  async (userId: number) => {
    const response = await fetch(`https://reqres.in/api/users/${userId}`);
    // Inferred return type: Promise<MyData>
    return (await response.json()) as MyData;
  },
);

const request = async () => {
  // Typescript error: `(property) dispatch: Dispatch<UnknownAction>(action: UnknownAction, ...extraArgs: any[]) => UnknownAction`
  const result = await store.dispatch(fetchUserById(3));
};

Edit: Here's a StackBlitz example: https://stackblitz.com/edit/react-ts-hmoqp3?file=App.tsx

[EskiMojo14]

Any chance you could get a reliable reproduction of this in either Typescript Playground or CodeSandbox (or a Github repo)? I've seen this crop up a couple of times, but not reliably enough to work out what's causing it.

[markerikson]

Hmm. Definitely something wrong there. AppDispatch isn't getting any of the thunk typing inferred:

[markerikson]

I will say that the react-redux dep is definitely wrong - you shouldn't be specifying multiple versions like this:

"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0",

Just use "^9", one version.

You also don't need to list redux separately, although in this case it shouldn't be making a difference.

But yeah, not immediately sure why this is getting inferred wrong.

[EskiMojo14]

huh, I'm not seeing that issue in the link - the only issues i can see is that your store needs at least one reducer and that you're not actually calling the thunk creator (i.e. should be dispatch(getUserById(1)) not dispatch(getUserById))

[omniphx]

@EskiMojo14 Just trying to recreate the Typescript error. Here's a screenshot:

@markerikson The stackblitz tool automatically added it that way for some reason ¯_(ツ)_/¯ Went ahead and changed it to ^9

Appreciate the help on this!

[EskiMojo14]

yeah, that type error is because you're trying to dispatch a thunk creator not a thunk.

[omniphx]

Ended up discovering that our codebase has a library @types/redux-mock-store that was causing redux to resolve to down to v4. Not sure why there was a similar error in the stackblitz example. Seems to just be a coincidence/red herring with something happening behind the scenes. Even tried creating a CRA app with the same exact code and had no Typescript issues.

@markerikson @EskiMojo14 thanks again for helping out. Just wanted to document my findings in case anyone else runs into something similar.