Store type mismatch when using redux-thunk

[suzu2469]

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.

[kirill-konshin]

Can you make a repo to reproduce this?

[suzu2469]

Of course, I made it here (I rewrote it from the above code to match v6.0.0)

https://codesandbox.io/s/musing-brown-16nd2

[kirill-konshin]

Thank you, I will look into it.

[Michalphs]

@suzu2469 Did you find solution? I have the same problem...

[kirill-konshin]

I haven't had time to look into this particular issue, sorry. It's in the backlog, I will fix it as soon as I can. In the mean time you guys are most welcome to investigate it too.

[Hyokune]

I seem to be having this issue (without redux-toolkit) as well but for the time being whenever I use the dispatch, I make sure to cast it to a ThunkDispatch so the type error disappears.
Can't say for sure if this is a good workaround.

(ctx.store.dispatch as ThunkDispatch<IApplicationState, void, AnyAction>)(action(value))

[eyalch]

This part looks relevant:

next-redux-wrapper/packages/wrapper/src/index.tsx

Line 22 in 3470c42

export declare type MakeStore<S = any, A extends Action = AnyAction> = (context: Context) => Store<S, A>;

From my understanding, the problem is that MakeStore is a function which returns a Store instead of something that extends Store, which is exactly the case with Redux Toolkit's configureStore which returns an EnhancedStore:

export function configureStore<
  S = any,
  A extends Action = AnyAction,
  M extends Middlewares<S> = [ThunkMiddlewareFor<S>]
>(options: ConfigureStoreOptions<S, A, M>): EnhancedStore<S, A, M>

export interface EnhancedStore<
  S = any,
  A extends Action = AnyAction,
  M extends Middlewares<S> = Middlewares<S>
> extends Store<S, A>

(source)

I tried to play with the TypeScript declarations but wasn't able to get it to work.

@kirill-konshin What do you think?

[kirill-konshin]

@eyalch makes sense to me. Feel free to send me a PR.

[nikhilraj1997]

@kirill-konshin could you please approve the PR so that this issue is closed. This behavior is unwanted in case of redux-thunk and it has been breaking applications for a some time

[kirill-konshin]

@nikhilraj1997 there are open questions in the PR, if you can help to resolve them — you're most welcome.

[nikhilraj1997]

@kirill-konshin I really appreciate your work on next-redux-wrapper and the fact that you are welcoming help from others but I don't believe I am qualified enough to resolve the issues. If I could I would have. I apologize for pushing you to close issues. It would be an honor to work on an open source project one day

[kirill-konshin]

@nikhilraj1997 well go ahead and give it a shot ))). That’s what open source is all about ) I simply don’t have enough time at the moment and the proposed change tends to be a major release, which should not happen for a change like what’s proposed. So if anyone can step up and make it work within a minor release - I’d gladly accept the contribution. As of for now, either I’ll make a major release or find time to investigate...

[Kupstas]

Any news?

[kirill-konshin]

I am still not having enough time to fix this at the moment. If anyone can attempt to fix it w/o publishing a major release — you are most welcome...

[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]

@adonig you're right, that's the correct way, according to docs: https://redux-toolkit.js.org/usage/usage-with-typescript#getting-the-dispatch-type

import { configureStore } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'
import rootReducer from './rootReducer'

const store = configureStore({
  reducer: rootReducer
})

export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types

Looks like even Redux Thunk itself does not have a cleaner way to tell store that it has modified the dispatch signature.

Closing.

[kirill-konshin]

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

[kirill-konshin]

Use #295 to track progress.

[kirill-konshin]

https://github.com/kirill-konshin/next-redux-wrapper/releases/tag/7.0.0-rc.1

[Kupstas]

It's an awesome update but I still have some questions. I've already updated to rc1 and changed code like in example but dispatch in getInitialProps or in getServerSideProps waits AnyAction instead of ThunkAction. I'm using pure redux-thunk + redux-act

[kirill-konshin]

@Kupstas weird. Take a look at this demo here: https://github.com/kirill-konshin/next-redux-wrapper/tree/types-enchancements/packages/demo-dynamic — AnyAction was not used.

[Kupstas]

@kirill-konshin I removed type of makeStore method and it worked. Really thanks, you did a great job!

[Ayman-Zein]

I use redux-thunk not redux-toolkit or typescript, and I have the same problem.
is any solution