Cannot dispatch action(createAsyncThunk): Argument of type 'AsyncThunkAction<number, number, {}>' is not assignable to parameter of type 'AnyAction'.

When I try to dispatch an action created with createAsyncThunk from the screen, I get an error and cannot resolve it. It should be the same as on the official page…

sample.ts

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'

// First, create the thunk
export const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId: number, thunkAPI) => {
    return userId
  }
)

index.tsx

import { useDispatch } from 'react-redux';

  const dispatch = useDispatch<AppDispatch>();
  useEffect(() => {
    dispatch(fetchUserById(1))
  });  

error:

TS2345: Argument of type 'AsyncThunkAction<number, number, {}>' is not assignable to parameter of type 'AnyAction'.

version:

  "@reduxjs/toolkit": "^1.8.2",
  "react-redux": "^8.0.2",

[markerikson]

Yep. Folks, please make sure that you’re following the syntax shown in the docs!

[phryneas]

@denisonepiece your code is

 middleware: (getDefaultMiddleware) => [
    ...getDefaultMiddleware({
      serializableCheck: {
        isSerializable: () => true,
      },
    }),
    saga,
  ],

which is very different from what we show in the docs.

please follow the approach recommended in the docs and use .concat instead of spreading here, the spread waters down the types of the array elements beyond recognition