CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-toolkitredux-thunk
montagnedev
montagnedev

Reputation: 23

"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!

Upvotes: 1

Views: 1864

Answers (2)

montagnedev
montagnedev

Reputation: 23

Thanks @markerikson, I wasn't setting correctly the state and dispatch's types in the createAsyncThunk definition. This worked for me in case it can help some soul :

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

And the store.js file :

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;

Thank you very much!

Upvotes: 1

markerikson
markerikson

Reputation: 67607

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:

Upvotes: 1

Related Questions