reactjs - Next.js:使用带有 TypeScript 的 next-redux-wrapper 在 getServerSideProps 中调用 Thunks？

Question

我正在尝试发送 thunk来自 getServerSideProps在 Next.js 中使用 next-redux-wrapper店铺。但是，我不断收到以下 typescript 错误:

TS2345: Argument of type '(dispatch: any) => Promise<any>' is not assignable to parameter of type 'AnyAction'.   Property 'type' is missing in type '(dispatch: any) => Promise<any>' but required in type 'AnyAction'.

我之前没有在 Redux 中使用过 TypeScript，所以不确定我在这里做错了什么......

我的代码如下:

// page.tsx

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ store, params }) => {
    store.dispatch(myThunkFunction(params.id));

    return {
      props: {
        id: params.id,
      },
    };
  });

// thunks.ts

export const myThunkFunction = id => {
  return async dispatch => {
    ...
  };
};

Answer 1

It seems to be a known issue with next-redux-wrapper when using redux-thunk ，其中dispatch next-redux-wrapper 返回的类型在 getServerSideProps (或 getInitialProps 因为那是我正在使用的)不是 ThunkDispatch .
我花了很多时间试图找出问题所在，并设法通过创建应用程序 thunk 调度类型来找到解决方法，例如export type AppThunkDispatch = ThunkDispatch<ApplicationState, void, AnyAction>并且在内部使用时 getServerSideProps (或 getInitialProps )您只需转换 store.dispatch到它。const thunkDispatch = store.dispatch as AppThunkDispatch我没试过 getServerSideProps但我假设传递给它的商店将与传递给 getInitialProps 的商店相同...