Next.js+Redux-Thunk中getServerSideProps调用store.dispatch报AsyncThunkAction类型错误

问题根因 #

该报错本质是next-redux-wrapper传入getServerSideProps的store实例的dispatch方法默认使用基础AnyAction类型，未包含Redux Thunk的异步Action类型定义，因此无法识别异步Thunk函数作为入参。组件内调用正常是因为你通常会给组件内的useDispatch钩子指定包含Thunk能力的自定义AppDispatch类型，两边类型不一致导致该问题。

具体解决方案 #

步骤1：修正store.tsx类型定义

configureStore默认已经集成了Thunk中间件的类型，不需要手动拼接ThunkDispatch类型，直接从store实例推导即可：

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import rootReducer from './reducers';

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

export type AppStore = ReturnType<typeof makeStore>;
export type AppState = ReturnType<AppStore['getState']>;
// 直接从store实例推导dispatch类型，自带Thunk类型支持
export type AppDispatch = AppStore['dispatch'];
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, AppState, unknown, Action>;

// 给createWrapper指定AppStore泛型，让后续返回的store类型自动匹配
export default createWrapper<AppStore>(makeStore);

步骤2：调整getServerSideProps代码

调整后store.dispatch已经是正确的AppDispatch类型，无需额外断言，同时注意异步Thunk返回Promise需要加await获取结果：

export const getServerSideProps = wrapper.getServerSideProps((store) => async () => {
    // 异步Thunk返回Promise，必须加await等待执行完成
    const resultAction = await store.dispatch(getPeoples(1));
    // 推荐用unwrap方法获取异步返回值，执行失败时会抛出错误可直接捕获
    const data = resultAction.unwrap();
    return {
      props: {
        peoples: data,
      },
    };
  }
);

如果不想修改wrapper的泛型定义，也可以用临时类型断言解决：

const dispatch = store.dispatch as AppDispatch;
dispatch(getPeoples(1));

内容的提问来源于stack exchange，提问作者foreverchoi