Store type mismatch when using redux-thunk

I want to use thunk’s AsyncAction from getInitialProps, but the type doesn’t match.

// --- In store module file
const fetch = ReduxToolkit.createAsyncThunk('count/fetch', async () => {
    // ... some codes
})

// --- In page file
const Page: Next.NextPage = () => {
    const count = useSelector(state => state.count)
    return <div>{count}</div>
}

Page.getInitialProps = async ({ store }) => {
    // TS2345: Argument of type 'AsyncThunkAction<Count, undefined, AsyncThunkConfig<unknown>>' is not assignable to parameter of type 'AnyAction'.   Property 'type' is missing in type 'AsyncThunkAction<Count, undefined, AsyncThunkConfig<unknown>>' but required in type 'AnyAction'.
    await store.dispatch(fetch())
    return {}
}

So this is how I wanted to solve it, but I couldn’t.

// --- In index.d.ts
port { NextPageContext } from 'next'
import { EnhancedStore } from '@reduxjs/toolkit'
import { ThunkMiddleware } from 'redux-thunk'

declare module 'next/dist/next-server/lib/utils' {
    export interface NextPageContext<S = any, A extends Action = AnyAction> {
        store: EnhancedStore<S, A, [ThunkMiddleware<S, A>]>
    }
}

I’m using redux-toolkit, but I think maybe even if someone is using pure thunk they’ll have the same problem. Please let me know if you have any other solutions.

[adonig]

While the issue isn’t fixed you can use the following workaround:

/* Export a dispatch type. */
export type AppThunkDispatch = ThunkDispatch<State, void, AnyAction>;

MyNextPage.getInitialProps = async ({ store }) => {
  /* Cast the store's dispatch function to the new type. */
  const dispatch = store.dispatch as AppThunkDispatch;
  await dispatch(someThunkAction());  // Now tslint doesn't complain anymore.
  return {};
};

[kirill-konshin]

P.S. Will be fixed in v7.0.