AsyncThunkAction is not assignable to parameter of type AnyAction in RTK middleware

[fultonm]

When dispatching an async thunk action from custom Middleware. A simple MVE is to drop in the custom middleware code below into the redux-typescript CRA, and update the middleware registration in store.ts configureStore to have middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(customMiddleware)

The only version of Redux in use is 4.1.2, and RTK is at 1.7.1

It seems the dispatch function available to us on the store from RTK's Middleware is not capable of dispatching AppThunk or AsyncThunkAction like useAppDispatch()? How can we get access to useAppDispatch() behavior in a middleware?

import { Middleware } from '@reduxjs/toolkit';
import { incrementAsync } from './counter/counterSlice';

const customMiddleware: Middleware = store => {
 
  return next => action => { 
    store.dispatch(incrementAsync(1)) 
    next(action);
  }
}
 
export default customMiddleware;

Here it is on codesandbox for convenience:
https://codesandbox.io/s/aged-mountain-ho3j9?file=/src/features/customMiddleware.ts

[phryneas]

The Middleware type is per default not aware of any other middlewares that would be present in your store. (That's why you have to add the generics.)

Note that this store is the store defined as "required by the middleware", not "your actual store". So you need to type it correctly as Middleware<{}, any, ThunkDispatch>, meaning "a middleware that does itself not extend Dispatch, works with any state shape and requires ThunkDispatch".