piotrwitek / react-redux-typescript-guide

The complete guide to static typing in "React & Redux" apps using TypeScript
https://piotrwitek.github.io/react-redux-typescript-guide/
MIT License
13.35k stars 1.09k forks source link

Slow typescript compile time #217

Open rturtu opened 3 years ago

rturtu commented 3 years ago

Hello, I work on a typescript react redux app using typesafe-actions. Recently, compiling / typechecking takes a lot of time (around 180s) (the app also requires more memory recently >8GB, but we fixed this using craco, and is not a problem anymore). The main section that I identified that takes a lot of time is the ActionType<typeof RootAction> (commenting this line will generate errors, but will reduce the compile time to ~10s).

The problem seems to be when infering all action types on the RootAction, it seems to be an union of all types from all actions.

The codebase has:

The setup is as follows: Action:

export const fetchCurrentUserAsync = createAsyncAction(
  'FETCH_USER_DATA_REQUEST',
  'FETCH_USER_DATA_SUCCESS',
  'FETCH_USER_DATA_FAILURE',
  'FETCH_USER_DATA_IDLE',
)<string, User, string, null>();

Epic:

export const fetchCurrentUserData: EpicFunction = (action$, state$, { api }) =>
  action$.pipe(
    filter(isActionOf(fetchCurrentUserAsync.request)),
    switchMap(action =>
      from(api.account.fetchCurrentUserData(action.payload)).pipe(
        map(fetchCurrentUserAsync.success),
        catchError(error => handleError(error, fetchCurrentUserAsync)),
      ),
    ),
  );

Reducer:

export const user = createReducer({} as User)
  .handleAction(fetchCurrentUserAsync.success, (state, action) => {
    return {...state, ...action.payload},
      },
    };
  })

Reducers are merged using combineReducer, except from this is when merging reducers into RootReducer, where the setup is as follows (this might not be the best approach, but AFAIK this shouldn't be the main problem ):

const reducerWrapper = (reducer: any) => {
  return (state: any, action: any) => {
    if (action.type === 'RESET_SESSION') {
      state = undefined;
    }
    return reducer(state, action);
  };
};

const rootReducer = {
  account: reducerWrapper(accountReducer),
  ...
};

Action / State types:

import { StateType, ActionType } from 'typesafe-actions';
import RootReducer from '../redux/store/root-reducer';
import RootAction from '../redux/store/root-action';

declare module 'typesafe-actions' {
  export type RootState = StateType<typeof RootReducer>;
  export type RootAction = ActionType<typeof RootAction>;
  export type Services = typeof import('./index').default;

  interface Types {
    RootAction: RootAction;
  }
}

My solution would be to remove typechecking with RootAction and add the types by hand for each .handleAction, but this is a workaround, not a fix. Do you have any ideas what how to fix that long compilation time on RootAction?

JesusTheHun commented 3 years ago

I have the same issue with a project about the same size