NgRx First time effect is called is much faster and following - ngrx

Question

I'm trying to optimize a page in an application and noticed when using console.time that the time from dispatching an action to reaching the effect takes a long time (>500ms).
When the page is fully loaded, I have a button that will trigger again the action (LoadBudgetListRequestAction) and fetch data from the server to render on the page)
The first time the page loads it takes 27-50ms, the following times I refresh the data using the button, it takes around 600-1000ms.
Code dispatching action:
loadBudgets() {
console.time('SINCE DISPATCHING UNTIL EFFECT');
console.time('DISPATCHING LoadBudgetListRequestAction until reducer');
this.store$.dispatch(
new BudgetListActions.LoadBudgetListRequestAction(),
);
}
Code reducer:
case BudgetListActionTypes.BUDGET_LIST_LOAD_REQUEST: {
console.timeEnd('DISPATCHING LoadBudgetListRequestAction until reducer');
return {
...state,
isLoading: true,
error: null,
isDataAvailable: false
};
}
Code effect:
#Injectable()
export class BudgetListStoreEffects {
#Effect()
loadRequestEffect$ = this.actions$.pipe(
ofType(
featureActions.BudgetListActionTypes.BUDGET_LIST_LOAD_REQUEST,
),
switchMap(() => {
console.timeEnd('SINCE DISPATCHING UNTIL EFFECT');
//API CALL
},
));
constructor(
private budgetApi: BudgetService,
private actions$: Actions,
private store$: Store<any>,
) {
}
}
The time from dispatching the action until the reducer is always under 1ms (console.timeEnd('DISPATCHING LoadBudgetListRequestAction until reducer')) but what I'm not understanding is why to reach the effect code it takes such a long time.
I have more than one effect because after retrieving the data from the server, I have to use the filters on the page as well (that are also in the store) to filter the data.
I'm assuming that the following times I reload the data, the store itself has much more data than in the first time. However, the amount of data that I'm retrieving isn't bigger than 1500 records.
Would appreciate any insight.
Thanks

Answer 1

Apparently the issue was using the StoreDevtoolsModule. When active it logs all data from the store to be used by the Redux DevTools and this slows the app.
While it is not a concern in dev environments, if it remains active in Production environment it might be an issue. It gets slower as the amount of data in the store gets bigger.