“没有超载匹配这个电话。” 在调用 AsyncThunk 时 function（redux 工具包）

Question

我对以下createAsyncThunk方法有疑问：

export const fetchPatientByDocument = createAsyncThunk<
  Patient,
  string,
  { state: { patient: { loading: string; CurrentRequestId: string } } }
>(
  'patient/fetchByDocument',
  async (patientdocument: string, { getState, requestId }) => {
    const { CurrentRequestId, loading } = getState().patient;
    if (loading !== 'pending' || requestId !== CurrentRequestId) {
      return;
    }
    const RequestURL: string =
      PatientBaseUrl + 'Pacientes/3/' + patientdocument;

    const response = await fetch(RequestURL).then((data) => data.json());

    return response;
  }
);

这里没有问题，但是当我尝试从登录页面dispatch这个 function 时，

  const handlerButtonclick = () => {
    const { loading, CurrentRequestId } = CurrentPatient;

    if (patientDocument) {
      const fetchPatient = async (patientDocument: string) => {
        try {
          const patient = await dispatch(
            fetchPatientByDocument(patientDocument)
          );
        } catch (e) {
          throw e;
        }
      };
    }

    // navigate(patientDocument + '/verification');
  };

我收到此错误：

没有过载匹配此调用。 重载 1 of 3, '(thunkAction: ThunkAction<Promise<PayloadAction<Patient, string, { arg: string; requestId: string; requestStatus: "fulfilled"; }, never> | PayloadAction<unknown, string, { arg: string; requestId: string; requestStatus: "rejected"; aborted: boolean; condition: boolean; } & ({...; } | ({...; } & {})), SerializedError>> & {...; }, CombinedState<...>, undefined, AnyAction>): Promise<...> & {...; }'，给出了以下错误。 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; 类型的参数 CurrentRequestId：字符串； }; }; 派遣？：派遣<AnyAction> | 不明确的; 额外的？：未知； 拒绝值？：未知； 序列化错误类型？：未知； pendingMeta？：未知； fulfilledMeta？：未知； 拒绝元？：未知； }>' 不可分配给 'ThunkAction<Promise<PayloadAction<Patient, string, { arg: string; 请求ID：字符串； 请求状态：“已完成”； }, 从不> | PayloadAction<未知，字符串，{ arg：字符串； 请求ID：字符串； 请求状态：“已拒绝”； 中止：boolean； 条件：boolean； } & ({...; } | ({...; } & {})), SerializedError>> & {...; } ...'。 参数类型“getState”和“getState”不兼容。 调用签名返回类型 'CombinedState<{ router: RouterState<any>; 患者：患者状态； }>' and '{ patient: { loading: string; CurrentRequestId：字符串； }; }' 不兼容。 “patient.CurrentRequestId”的类型在这些类型之间不兼容。 输入'字符串| undefined' 不可分配给类型 'string'。 类型“undefined”不可分配给类型“string”。 重载 2 of 3，'(action: AnyAction): AnyAction'，出现以下错误。 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; 类型的参数 CurrentRequestId：字符串； }; }; 派遣？：派遣<AnyAction> | 不明确的; 额外的？：未知； 拒绝值？：未知； 序列化错误类型？：未知； pendingMeta？：未知； fulfilledMeta？：未知； 拒绝元？：未知； }>' 不可分配给 'AnyAction' 类型的参数。 类型 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; 中缺少属性 'type' CurrentRequestId：字符串； }; }; 派遣？：派遣<AnyAction> | 不明确的; 额外的？：未知； 拒绝值？：未知； 序列化错误类型？：未知； pendingMeta？：未知； fulfilledMeta？：未知； 拒绝元？：未知； }>' 但在类型 'AnyAction' 中是必需的。 重载 3 of 3, '(action: AnyAction | ThunkAction<Promise<PayloadAction<Patient, string, { arg: string; requestId: string; requestStatus: "fulfilled"; }, never> | PayloadAction<unknown, string, {.. .; } & ({...; } | ({...; } & {})), SerializedError>> & {...; }, CombinedState<...>, undefined, AnyAction>): AnyAction | (Promise<...> & {...; })'，出现以下错误。 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; 类型的参数 CurrentRequestId：字符串； }; }; 派遣？：派遣<AnyAction> | 不明确的; 额外的？：未知； 拒绝值？：未知； 序列化错误类型？：未知； pendingMeta？：未知； fulfilledMeta？：未知； 拒绝元？：未知； }>' 不可分配给 'AnyAction | 类型的参数 ThunkAction<Promise<PayloadAction<Patient, 字符串, { arg: 字符串; 请求ID：字符串； 请求状态：“已完成”； }, 从不> | PayloadAction<未知，字符串，{...; } & ({...; } | ({...; } & {})), SerializedError>> & {...; }, CombinedState<...>, undefined, AnyAction>'. 输入 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; CurrentRequestId：字符串； }; }; 派遣？：派遣<AnyAction> | 不明确的; 额外的？：未知； 拒绝值？：未知； 序列化错误类型？：未知； pendingMeta？：未知； fulfilledMeta？：未知； 拒绝元？：未知； }>' 不可分配给类型 'ThunkAction<Promise<PayloadAction<Patient, string, { arg: string; 请求ID：字符串； 请求状态：“已完成”； }, 从不> | PayloadAction<未知，字符串，{ arg：字符串； 请求ID：字符串； 请求状态：“已拒绝”； 中止：boolean； 条件：boolean； } & ({...; } | ({...; } & {})), SerializedError>> & {...; } ...'。

我已经尝试在fetchPatientByDocument调用中传递state ，或将其从createAsyncThunk中删除，但似乎没有任何效果。

有任何想法吗？ 谢谢！

Answer 1

看起来您手写的state泛型的createAsyncThunk覆盖与整个应用程序的实际根 state 类型不匹配。

这里正确的方法是遵循我们的 TS 使用指南来推断整个应用程序 state 的RootState类型，并使用它：

• https://redux.js.org/tutorials/typescript-quick-start#define-root-state-and-dispatch-types
• https://redux-toolkit.js.org/usage/usage-with-typescript#typing-the-thunkapi-object

Answer 2

谢谢@markerikson，我没有在createAsyncThunk定义中正确设置state and dispatch's类型。 如果它可以帮助一些灵魂，这对我有用：

import type { RootState, AppDispatch } from '../store';

export const fetchPatientByDocument = createAsyncThunk<
  Patient,
  string,
  {
    // Optional fields for defining thunkApi field types
    dispatch: AppDispatch;
    state: RootState;
    extraArguemnt: {
      loading: string;
      CurrentRequestId: string | undefined;
    };
  }
>(
  'patient/fetchByDocument',
  async (patientdocument: string, { getState, requestId }) => {
    const { CurrentRequestId, loading } = getState().patient;
    if (loading !== 'pending' || requestId !== CurrentRequestId) {
      return;
    }
    const RequestURL: string =
      PatientBaseUrl + 'Pacientes/3/' + patientdocument;

    const response = await fetch(RequestURL).then((data) => data.json());

    return response;
  }
);

和store.js文件：

import { configureStore } from '@reduxjs/toolkit';
import PatientReducer from '../reducer/patientSlice';

export const store = configureStore({
  reducer: {
    patient: PatientReducer
  }
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

非常感谢你！