使用NGRX时如何避免不必要的API调用

Question

我有一个带有2个菜单项的应用程序；团队，球员。每当我之间切换它们时，即使我在存储中有数据，我也必须不必要的API调用。

以下是效果文件： //auth.effects.ts

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

以下是我将API呼叫

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

在ngoninit中进行的组件，导致不必要的API调用。 this.teams $ = this.store.select（getTeams）;

如何预防它，以便在初始化应用程序时使API一次调用？

Answer 1

loadTeams$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(AuthActions.loadTeams),
      // read the actions$ for an load success event
      withLatestFrom(this.actions$.pipe(ofType(AuthActions.loadTeamsSuccess)),
      // no success event? no teams loaded, so go on
      filter(([loadTeamsAction, loadTeamsSuccessAction]) => !loadTeamsSuccessAction),
      // remove unnecessary action
      map(([loadTeams,]) => 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 }));
          })
        )
      )
    );
  });

Answer 2

在收到活动后阅读商店，然后过滤掉已经在商店中具有值的发出。

更多信息： https://timdeschryver.dev/blog/start-using-ngrx-effects-for-this/#enhance-your-actor-with-with-with-global-store-state

detail = createEffect(() => {
  return this.actions.pipe(
    ofType(ProductDetailPage.loaded),
    concatLatestFrom(() => this.store.select(selectProducts)),
    filter(([{ payload }, products]) => !!products[payload.sku]),
    mergeMap(([{payload}]) => {
      ...
    })
  )
})