非同期パイプとngrxストア

Question

ngrxストアでは、状態を選択してから、非同期パイプでテンプレート内のオブジェクトを複数回使用します。 これは事前の成果を傷つけますか？

これは私が使用していたコードです：

コンストラクタ：

this.tabs = this.store.select(s => { return s.lobby.lobbyTabs}); 

テンプレート：

<div *ngIf="(tabs | async) && (tabs | async).length >0 && (tabs | async)[tabIndex].TabPositions && (tabs | async)[tabIndex].TabPositions.length > 0 && (tabs | async)[tabIndex].themeId ==1"> 

<div *ngFor="let i of createNumArray((tabs | async)[tabIndex].TabPositions.length)" class="column"> 
       <app-ticket [ticket]='rooms[(tabs | async)[tabIndex].TabPositions[i-1].Id]' [themeId]='(tabs | async)[tabIndex].themeId' 
       [lastLobbyTimestamp]='(lastLobbyTimestamp | async)'></app-ticket> 
      </div> 

は、非同期パイプで動作するように良い方法はありますか？

Answer 1

いくつかの非同期は正常ですが、かなりパフォーマンスが良いです。しかし、ロジックをセレクタに入れることで、これらの非同期呼び出しのいくつかを排除することができます。

だけではなく、タブのデータを選択し、あなたのngIfのロジックを入れて、セレクタにすべてのそのロジックを動かす：

this.showAppTickets = this.store 
    .select(state => state.lobby.lobbyTabs) 
    .map(tabs => { 
     return tabs && tabs.length && tabs[tabIndex] && 
     tabs[tabIndex].tabPositions && 
     tabs[tabIndex].tabPositions.length > 0 && 
     tabs[tabIndex].themeId === 1}) 

あなたがテンプレートに少ないasyncsを使用することができます：

<div *ngIf='showAppTickets | async'> 

ngForのソースでも同じことができます。私は通常、自分のコレクションを中間オブジェクトにマッピングするので、ngForでは非同期パイプしか使用しません。ループしているコンポーネントの入力には使用しません。

<div *ngFor='let item of items | async'> 
    <app-ticket 
     [ticket]='item.ticket' 
     [themeId]='item.themeId' 
     [lastLobbyTimestamp]='item.lastTimeStamp'> 
    </app-ticket> 
</div> 

あなたが適切にあなたのコンポーネントクラスにセレクタ/ rxjs演算子を使用する場合は、あなたのテンプレートで2本の非同期パイプをのみ必要になります。これにより、テンプレートを読みやすく、パフォーマンスが向上し、テスト可能になります