Search code examples
reactjsreduxreact-reduxredux-toolkitredux-thunk

"No overload matches this call." while calling an AsyncThunk function (redux toolkit)

I have an issue with the following createAsyncThunk method :

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;
  }
);

There is no problem here, but when I try to dispatch this function from the login page,

  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');
  };

I get this error :

No overload matches this call. Overload 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<...> & { ...; }', gave the following error. Argument of type 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; CurrentRequestId: string; }; }; dispatch?: Dispatch<AnyAction> | undefined; extra?: unknown; rejectValue?: unknown; serializedErrorType?: unknown; pendingMeta?: unknown; fulfilledMeta?: unknown; rejectedMeta?: unknown; }>' is not assignable to parameter of type '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>> & { ...; }...'. Types of parameters 'getState' and 'getState' are incompatible. Call signature return types 'CombinedState<{ router: RouterState<any>; patient: PatientState; }>' and '{ patient: { loading: string; CurrentRequestId: string; }; }' are incompatible. The types of 'patient.CurrentRequestId' are incompatible between these types. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Overload 2 of 3, '(action: AnyAction): AnyAction', gave the following error. Argument of type 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; CurrentRequestId: string; }; }; dispatch?: Dispatch<AnyAction> | undefined; extra?: unknown; rejectValue?: unknown; serializedErrorType?: unknown; pendingMeta?: unknown; fulfilledMeta?: unknown; rejectedMeta?: unknown; }>' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; CurrentRequestId: string; }; }; dispatch?: Dispatch<AnyAction> | undefined; extra?: unknown; rejectValue?: unknown; serializedErrorType?: unknown; pendingMeta?: unknown; fulfilledMeta?: unknown; rejectedMeta?: unknown; }>' but required in type 'AnyAction'. Overload 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<...> & { ...; })', gave the following error. Argument of type 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; CurrentRequestId: string; }; }; dispatch?: Dispatch<AnyAction> | undefined; extra?: unknown; rejectValue?: unknown; serializedErrorType?: unknown; pendingMeta?: unknown; fulfilledMeta?: unknown; rejectedMeta?: unknown; }>' is not assignable to parameter of type 'AnyAction | ThunkAction<Promise<PayloadAction<Patient, string, { arg: string; requestId: string; requestStatus: "fulfilled"; }, never> | PayloadAction<unknown, string, { ...; } & ({ ...; } | ({ ...; } & {})), SerializedError>> & { ...; }, CombinedState<...>, undefined, AnyAction>'. Type 'AsyncThunkAction<Patient, string, { state: { patient: { loading: string; CurrentRequestId: string; }; }; dispatch?: Dispatch<AnyAction> | undefined; extra?: unknown; rejectValue?: unknown; serializedErrorType?: unknown; pendingMeta?: unknown; fulfilledMeta?: unknown; rejectedMeta?: unknown; }>' is not assignable to type '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>> & { ...; }...'.

I already tried to pass the state in the fetchPatientByDocument call, or remove it from createAsyncThunk but nothing seems to work.

Any ideas? Thanks!

Solution

  • It looks like your hand-written override of the state generic for createAsyncThunk does not match the actual root state type for the entire app.

    The right approach here is to follow our TS usage guidelines to infer a RootState type for the entire app state, and use that: