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

Ngrx存储以及如何防止重载数据

1 个答案: