TS conflict between AppThunk and createAsyncThunk.withTypes

[Rish]

What docs page needs to be fixed?

In the Redux Docs > Usage With Typescript > Type Checking Redux Thunks, it recommends using the following to type thunks:

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType, // return type of the thunk function
  RootState, // state type used by getState
  unknown, // any "extra argument" injected into the thunk
  UnknownAction // known types of actions that can be dispatched
>

In the RTK Docs > Usage with Typescript > Defining a Pre-Typed createAsyncThunk, it recommends the following to type createAsyncThunk:

const createAppAsyncThunk = createAsyncThunk.withTypes<{
  state: RootState
  dispatch: AppDispatch
  rejectValue: string
  extra: { s: string; n: number }
}>()

I'm using both of these in my apps, but when I try to dispatch a thunk created using createAppAsyncThunk from a regular thunk, it's flagging a type error.

What is the problem?

From what I can see, it seems the two approaches type dispatch differently. The first approach (with AppThunk) types the dispatch parameter as ThunkDispatch<RootState, unknown, UnknownAction> but the second approach (with createAsyncThunk.withTypes) types the dispatch parameter as ThunkDispatch<RootState, undefined, UnknownAction> which is causing a problem,

What should be changed to fix the problem?

I was able to fix the problem like this:

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  undefined, // changed this from unknown to undefined
  UnknownAction
>

[Ben Durrant]

are you specifically providing extra: undefined as one of the keys in your ThunkApiConfig for .withTypes? if you don't provide it, it should default to unknown.

[Ben Durrant]

TS Playground