角度2 ngrx /ストアのベストプラクティス

Question

iは、パターンをngrxするすべてのプロジェクトをリファクタリング始めるが、私はまだ心の中でいくつかの質問を持っている：

私のアプリケーションは、私はアプリとのリストを取得するかどう

アプリケーションのカテゴリのリスト

1-このような場合、古い方法で「選択されたカテゴリ」（1つしか選択できないため、その正当なプリミティブ）を管理できますか？ ：

Categories.component.ts

... 
... 
OnCategorySelect (applicationID : string) { 
this.selectedCategory = applicationID 
} 

または私はそのためにselectedCategory減速を作成する必要がありますか？

2 - ダム1（categoryComponent）にスマートコンポーネント（applicationsListComponent）からデータを渡すときに、私は非同期パイプと、このようにそれを実行します。この場合、

**ApplicationsListComponent.ts** 

.... 
.... 
<app-category [categories]='appCategories | async'></app-category> 

iがダムのコンポーネントでchangeDetection: ChangeDetectionStrategy.OnPushを置く必要がありますか？私のダムの成分（categoryComponent）で

3 - 私は@Inputのi'amが観察としてではなく、これを行うi'amそれを宣言しないwhithスマートコンポーネントからcategoriesを受け取る：

category.component.ts

@Input() appCategories: CategoryInfo[]; 

category.component.html

<div *ngFor='let app of appCategories'>....</div> 

この場合、Observableとしてスマートコンポーネントから@Inputで受け取ったデータを宣言しなければならないかどうかはわかりません。

提案がありますか？

Answer 1

1-このような場合、別の減速機「selectedCategory」を作成しました。その実装はかなり簡単です

import { ActionReducer, Action } from '@ngrx/store'; 
    import { SELECT_CATEGORY } from '../actions'; 

    export const selectedCategory: ActionReducer<ICategory> = (state: ICategory, {type, payload}: Action) => { 
     switch (type) { 
      case SELECT_CATEGORY: 
       return payload; 

      default: 
       return state; 
     } 
    }; 

2-はい。 ngrxのストアは不変です。これは、オブジェクトのプロパティが変更されている場合、監視でAngularのポイントがないことを意味します。入力データが変更できる唯一の方法は、@Inputオブジェクト全体を変更することです。だからchangeDetection: ChangeDetectionStrategy.OnPushは問題ありません。

3- No. @InputプロパティはObservablesであってはなりません。 asyncパイプ（あなたの例のような）を介してそれらをバインドするだけで十分です。 Observableを直接ダンプコンポーネントに渡した場合（asyncなし）、角度変化検出は期待どおりに機能しません。 Observableオブジェクトへの参照は、実際のデータが変更されても常に同じままになります。この場合、データ変更に対応したい場合は、手動でObservableに登録（および登録解除）する必要があります。これは完全に混乱します。

Answer 2

あなたが観察できるソースからのもので@Input、上の変化を検出したい場合は、@ user1614543の答え

の詳細を追加します。

ダムコンポーネントで次のコードを使用します。

ngOnChanges(changes: SimpleChanges) { 
    if (changes.hasOwnProperty('appCategories')) { 
    ... 
    } 
}