Facing type issue when lazy loading redux action inside a wrapper function

Viewed 39

This is the action inside an actions.ts file.

export const toggleGroupFlightSummaryView = (
  showSummary: boolean
): { type: string; payload: { showSummary: boolean } } => {
  return {
    type: SET_GROUP_FLIGHT_SUMMARY_VIEW,
    payload: {
      showSummary
    }
  };
};

The wrapper function looks like inside lazyload.ts

export function lazyLoadActionIfTravelEnabled<R = void>(
  importAction: () => Promise<(...args) => AsyncAppThunk<R>>,
): (...args: $TSFixMe[]) => AsyncAppThunk<R> {
  return withLoading((...args): unknown => {
    return async (dispatch, getState) => {
      const action = await importAction();
      return await dispatch(action(...args));
    };
  });
}

And

export type AppThunk<R = void> = ThunkAction<R, RootState, { apolloClient: ApolloClient<unknown> }, Action<string>>;
export type AsyncAppThunk<R = void> = AppThunk<Promise<R>>;

Where ThunkAction is imported from redux-thunk.

Now from other file this is lazy loaded as which gives type issues.

export const toggleGroupFlightSummaryView = lazyLoadActionIfTravelEnabled(() =>
  import(/* webpackChunkName: "travelRegistration" */ './actions').then(m => m.toggleGroupFlightSummaryView)
);

Complete error is:

Type 'Promise<((...args: any[]) => AsyncAppThunk<never>) | ((showSummary: boolean) => { type: string; payload: { showSummary: boolean; }; })>' is not assignable to type 'Promise<(...args: any[]) => AsyncAppThunk<void>>'.
  Type '((...args: any[]) => AsyncAppThunk<never>) | ((showSummary: boolean) => { type: string; payload: { showSummary: boolean; }; })' is not assignable to type '(...args: any[]) => AsyncAppThunk<void>'.
    Type '(showSummary: boolean) => { type: string; payload: { showSummary: boolean; }; }' is not assignable to type '(...args: any[]) => AsyncAppThunk<void>'.
      Type '{ type: string; payload: { showSummary: boolean; }; }' is not assignable to type 'AsyncAppThunk<void>'.
        Type '{ type: string; payload: { showSummary: boolean; }; }' provides no match for the signature '(dispatch: ThunkDispatch<RootState, { apolloClient: ApolloClient<unknown>; }, Action<string>>, getState: () => RootState, extraArgument: { ...; }): Promise<...>'.ts(2322)
lazyLoad.ts(29, 17): The expected type comes from the return type of this signature.
0 Answers
Related