如何知道ngrx中哪个状态值发生了变化？

Question

当我使用ngrx时，如果我想传递一个值给它的子组件，我是这样做的：

//父组件

<product1-component [product]="(model$ | async)?.product1"></product1-component>
<product2-component [product]="(model$ | async)?.product2"></product2-component>

this.model$ = Observable
  .combineLatest(
    this._store.select('products')
  )
  .let(ProductsModel());

现在我想在父组件本身内部使用值 product1 和 product2。我现在就是这样做的（有没有更好的办法？）：

this.model$.subscribe((model: any) => {
  if (!model) return;
  // Right now here no matter which value changes, it will run.
  // However what I want is:
  // if `product1` changes, do something
  // if `product2` changes, do something
});

我怎么知道哪个状态值改变了？谢谢

Answer 1

存储 returns 和 Observable 的 select 函数。因此，您可以自由使用 Rxjs 中可用的任何运算符来实现您想要的。

要回答您的问题，您可以做的是：

const nonNullModel$ = this.model$.filter(x => !!x);

this.product1$ = nonNullModel$.map(x => x.product1);
this.product2$ = nonNullModel$.map(x => x.product2);

请记住，每次 products 状态切片发生变化时，product1$ 和 product2$ 都会推送一个新值。如果您只对 product1 或 product2 真正发生变化时感兴趣，可以使用 distinctUntilChanged 运算符：

this.product1$ = nonNullModel$.map(x => x.product1).distinctUntilChanged();

因为这几乎就是 select 为您所做的，您可以改写：

this.product1$ = this_store.select(x => x.products && x.products.product1);
this.product2$ = this_store.select(x => x.products && x.products.product2);

您现在可以使用 async 管道在模板中直接使用每个流，就像将值向下传递给子组件一样。

<product1-component [product]="product1$ | async"></product1-component>
<product2-component [product]="product2$ | async"></product2-component>

JSON representation of my product 1: {{product1$ | async | json}}

如果你想在父组件中做一些事情class:

this.sub1 = this.product1$.subcribe(p => // Do something with product 1);
this.sub2 = this.product2$.subcribe(p => // Do something with product 2);

请注意，当您显式订阅（而不是使用 async 管道）一个可观察对象时，您应该注意在组件被销毁时取消订阅。

ngOnDestroy() {
    this.sub1 && this.sub1.unsubcribe();
    this.sub2 && this.sub2.unsubcribe();
}

如何知道ngrx中哪个状态值发生了变化？

How to know which state value changes in ngrx?

typescript

ngrx

angular