next-redux-wrapper: 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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 10
Comments: 23 (12 by maintainers)

Commits related to this issue

fix(wrapper): :label: add typing for Store super-types support stores that `extends Store` and thus providing typing for something like Redux Toolkit's `EnhancedStore` BREAKING CHANGE: change some o... — committed to eyalch/next-redux-wrapper by deleted user 4 years ago
Fix #207 — committed to kirill-konshin/next-redux-wrapper by kirill-konshin 4 years ago
Types enchancements (#295) * Fix #280 * Fix #207 * Minor fixes * Updated API * Updated versions * Update README.md * Fixed demos & tests * Github Action * Make demo-dynamic private * Fix #32... — committed to kirill-konshin/next-redux-wrapper by kirill-konshin 3 years ago

Most upvoted comments

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 {};
};

+12

adonig on Oct 19, 2020

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

+10

kirill-konshin on Oct 29, 2020

This part looks relevant: https://github.com/kirill-konshin/next-redux-wrapper/blob/3470c42b3219f038a02e5e241229face05c397c5/packages/wrapper/src/index.tsx#L22

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?

eyalch on Jun 16, 2020

Thank you, I will look into it.

kirill-konshin on May 12, 2020

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…

kirill-konshin on Aug 17, 2020

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

kirill-konshin on Dec 12, 2020

Use https://github.com/kirill-konshin/next-redux-wrapper/pull/295 to track progress.

kirill-konshin on Oct 29, 2020

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.

kirill-konshin on Jun 2, 2020

@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 on Oct 29, 2020