NGRX - 如何訂閱更新列表的多個請求，但防止它在第一次加載時加載多次？

Question

我正在使用 Angular-NGRX，我有 3 個可以修改列表數據的組件。 在主要組件中，我監聽所有更改以更新列表並且它有效。 問題是第一次加載訂閱了我 3 次。

這是主要組件的 ngOnInit：

  ngOnInit(): void {
    // Change order
    this.store.select(state => state.shared.orderBy).pipe(
      takeUntil(this.onDestroy$),
      tap(resp => {
        this.orderBy = resp;
        this._cmsFunctions.deselectAll('Resource');
      }),
      switchMap(resp => this._dynamicComponentsService.loadResources(this.itemsToShow, this.tabCounter, this.orderBy, this.filters, this.searchTerm, this.company, this.workgroup, (this.paramCode) ? this.paramCode : 0))
      ).subscribe();

    // Change filters
    this.store.select(state => state.shared.filters).pipe(
      takeUntil(this.onDestroy$),
      tap(resp => {
        this.filters = resp;
        this._cmsFunctions.deselectAll('Resource');
      }),
      switchMap(resp => this._dynamicComponentsService.loadResources(this.itemsToShow, this.tabCounter, this.orderBy, this.filters, this.searchTerm, this.company, this.workgroup, (this.paramCode) ? this.paramCode : 0))
      ).subscribe();

    // Change search term
    this.store.select(state => state.shared.searchTerm).pipe(
      takeUntil(this.onDestroy$),
      tap(resp => {
        this.searchTerm = resp;
        this._cmsFunctions.deselectAll('Resource');
      }),
      switchMap(resp => this._dynamicComponentsService.loadResources(this.itemsToShow, this.tabCounter, this.orderBy, this.filters, this.searchTerm, this.company, this.workgroup, (this.paramCode) ? this.paramCode : 0))
      ).subscribe();
  }

我只需要在啟動時只訂閱一次：

在此處輸入圖像描述

我該如何改進這段代碼？

謝謝！

Answer 1

您不應該從組件調用數據服務，當然也不應該基於選擇器調用。 您應該調度一個由 Effect 捕獲和處理的 Action。 例如，您可以在商店中使用dataLoading和dataLoaded標志來防止多次加載。