I'm facing an issue with my application that has 2 menu items; Teams and Players. Every time I switch between them, an unnecessary API call is made even though the data is already stored.
Here is the effects file:
loadTeams$ = createEffect(() => {
return this.actions$.pipe(
ofType(AuthActions.loadTeams),
switchMap((action) =>
this.apiService.teams$.pipe(
tap(() => console.log('get teams request')),
map((teams: Team[]) => AuthActions.loadTeamsSuccess({ teams })),
catchError((error) => {
console.log('err', error);
return of(AuthActions.loadFailure({ error }));
})
)
)
);
});
Here is the component where the API call is made:
teams-list.component.ts
export class TeamsListComponent implements OnInit {
loading$?: Observable<boolean>;
error$?: Observable<string>;
teams$?: Observable<Team[]>;
retrySubject$ = new BehaviorSubject<boolean>(true);
constructor(private store: Store<State>) {}
ngOnInit(): void {
this.store.dispatch(loadTeams());
this.teams$ = this.store.select(getTeams);
this.error$ = this.store.select(getError);
this.loading$ = this.store.select(getLoading);
}
fetchRetry() {
this.retrySubject$.next(false);
}
}
The line in ngOnInit is causing the unnecessary API call.
this.teams$ = this.store.select(getTeams);Is there a way to prevent this so that the API call is made only once when initializing the app?