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

Question

我正在尝试使用next-redux-wrapper存储从 Next.js 中的getServerSideProps发送一个thunk 。 但是，我不断收到以下 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'.

我以前没有使用过 TypeScript 和 Redux，所以不知道我在这里做错了什么......

我的代码如下：

// 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

使用redux-thunk时next-redux-wrapper似乎是一个已知问题，其中getServerSideProps （或我正在使用的getInitialProps ）中的next-redux-wrapper返回的dispatch类型不是ThunkDispatch 。

我花了很多时间试图找出问题所在，并通过创建一个应用程序 thunk 调度类型来设法找到解决方法

export type AppThunkDispatch = ThunkDispatch<ApplicationState, void, AnyAction>

当在getServerSideProps （或getInitialProps ）中使用它时，您只需将store.dispatch为它。

const thunkDispatch = store.dispatch as AppThunkDispatch

我没有用getServerSideProps尝试过，但我假设传递给它的商店将与传递给getInitialProps的商店相同......