Ngrxストアとデータのリロードを防止する方法

Question

現在、私はNgrxストアでAngularを学習しようとしています。サンプルを見て、私は次のことを思いついた。 （完全なソースhttps://github.com/sebfischer83/Cointo/tree/master/angular/src）

私は、ストアを含み、データベースからエンティティを読み込むコンテナコンポーネントを持っています。

@Component({ 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    templateUrl: './materials-Page.component.html', 
    styleUrls: ['./materials-Page.component.css'] 
}) 
export class MaterialsPageComponent implements OnInit { 
    materials$: Observable<MaterialDto[]>; 

    constructor(private _store: Store<fromRoot.AppState>) { 
    this.materials$ = _store.select(fromRoot.getMaterialsEntities); 
    } 

    ngOnInit() { 
    this._store.dispatch(new LoadMaterialsAction()); 
    } 

しかし、多分私は理解して問題を抱えている私の店は、私はこのページをクリックするたびに更新されますので、今私はngOnInitでこのコンポーネントにディスパッチを変更するたびに、サーバーからすべてのデータを再ロードします。しかし、店舗内に既に存在するデータは使用しないでください。

Answer 1

副作用でrxjs startWith演算子を使用できます。したがって、次のようなものがあります。

loadMaterials$ = this._actions.ofType(materials.MaterialActionTypes.LOAD) 
    .startWith(new LoadMaterialsAction()) 
    .switchMap(() => this._service.query() 
    .map((materials) => { ... }) 

基本的に、startWith演算子はすぐに副作用を呼び出します。したがって、ngOnInitでディスパッチする必要はなくなりました。参考のため

あなたはngrx例のアプリがこれと同じ手法をやって見ることができます： https://github.com/ngrx/example-app/blob/master/src/app/effects/collection.ts#L44