Calling dispatch with a thunk from createAsyncAppThunk causes a Typescript error

[renchap]

Here is a link to the PR where this happens: mastodon/mastodon#29789

createAsyncAppThunk is defined (in app/javascript/mastodon/store/typed_functions.ts) as:

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

The failure is in app/javascript/mastodon/actions/polls.ts. By simplifying the code, we have:

export const importFetchedPoll = createAppAsyncThunk(
  'poll/importFetched',
  () => {
    // …
  },
);

export const fetchPoll = createAppAsyncThunk(
  'poll/fetch',
  async (_, { dispatch, getState }) => {
    await dispatch(importFetchedPoll());
  },
);

That fails with

No overload matches this call.
  The last overload gave the following error.
    Argument of type 'AsyncThunkAction<void, void, { state: { announcements: any; dropdownMenu: DropdownMenuState; timelines: any; meta: Map<any, any>; alerts: any; loadingBar: any; modal: Record<ModalState> & Readonly<...>; ... 31 more ...; notificationRequests: any; }; ... 6 more ...; rejectedMeta?: unknown; }>' is not assignable to parameter of type 'AnyAction'.ts(2769)

If I comment dispatch: AppDispatch; from createAppAsyncThunk definition, then the problem goes away (but the docs recommend setting the proper dispatch type).

I double checked our configureStore definition but the middlewares should be setup properly using getDefaultMiddleware().concat(). Am I missing something here?

Note: this is a legacy app that I am working on modernising, it uses Immutable.js for the root state (I am replacing the reducers incrementally to switch to Immer). I do not think it matters but this is the biggest divergence with a normal RTK app.

[EskiMojo14]

the issue is with your other middleware types - they should all be Middleware<{}, RootState>. using Record<string, never> is causing the issue, just disable the lint rule for those lines.
same goes for the loadingBarMiddleware, it doesn't add any overloads to dispatch so should just be {} for the DispatchExt.

The first type parameter is for adding overloads to dispatch, for example if you had a middleware that intercepted dispatched promises:

const boxPromiseResultMiddleware: Middleware<
  <T>(promise: Promise<T>) => Promise<{ value: T }>
> = (api) => (next) => (action) => {
  if (action instanceof Promise) {
    return action.then((value) => ({ value }));
  }
  return next(action);
};

const { value } = await dispatch(aPromise)

if your middleware doesn't add any overloads, it should just use {} which won't cause issues when intersected with the other overloads.

[EskiMojo14]

PRs welcome, if you reckon there's a good place to put it :)

[renchap]

Here you go: reduxjs/redux#4691

[aryaemami59]

Correct me if I'm wrong but I think you should be able to pass in NonNullable<unknown> instead of {} which should silence those typescript-eslint errors.

[phryneas]

The ESLint rule just applies in too many situtations - I've already complained about that years ago.

[EskiMojo14]

honestly, yeah - {} can be confusing if you don't know what it means, but having a rule that completely bans it in a recommended config seems equally confusing