Argument of type 'AsyncThunkAction<any, number | undefined, {}>' is not assignable to parameter of type 'AnyAction'

user_17005814 0
Viewed 833

I am currently developing a web application based on Next.js.

We are using Next.js + Redux + Redux-Thunk. I'm asking this question because an error occurred during development.

Argument of type 'AsyncThunkAction<any, number | undefined, {}>' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type 'AsyncThunkAction<any, number | undefined, {}>' but required in type 'AnyAction'.

Within a component, dispatch usually receives thunk functions as parameters, but store.dispatch() cannot receive thunk functions as parameters of the getServerSideProps function.

export const getServerSideProps = wrapper.getServerSideProps((store) => async () => {
    store.dispatch(getPeoples(1));
    return {
      props: {
        peoples: data,
      },
    };
  }
);

It's my store.tsx

const makeStore = () => configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => getDefaultMiddleware(),
    // devTools,
    // preloadedState,
    // enhancers:
});

export type AppStore = ReturnType<typeof makeStore>;
export type AppState = ReturnType<AppStore['getState']>;
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, AppState, unknown, 
Action>;
export type AppThunkDispatch = ThunkDispatch<{}, void, AnyAction>

export default createWrapper(makeStore);

Is there a good solution?

redux-thunk redux typescript next.js reactjs
1 Answers

createWrapper (since v7) should pick that up correctly. Can you test if you have the same problem when importing store directly? There is a known problem when somehow redux 4.0.5 and 4.1.1 are installed both somewhere in your node_modules that the dispatch type goes off and you could detect that that way - if you face the same problem using store directly, you'll need to fix that installation issue.

user_20759440
Related