angular - @ngrx/store 订阅商店的一部分，避免检测其他部分的变化

Question

背景

我商店中的一个 reducer 处理在应用程序中选择的东西。这家商店的界面(我们称它为 app)可能如下所示:

interface IApp {
    selectedProject: IProject;
    selectedPart: IPart;
}

所以我想要一个仅在选择不同的“项目”时才执行操作的订阅。我写了这样的东西:

this.store.select('app')
    .map((store: IApp) => store.selectedProject)
    .subscribe((project: IProject) => {
        // Stuff happens here
    });

此函数会在 selectedProject 更改时填充。但是，当 selectedPart 更改时，它也会执行此操作。显然，它会监听整个 app 商店，而不管 map 。这是有道理的。

问题

我不希望这样的事情发生。我只希望我的函数在 selectedProject 更改时执行。

我知道我可以将 selectedProject 和 selectedPart 拆分到不同的商店来解决这个问题。但是，我很快就会有很多很多商店。也许这就是它的本意？

还有别的方法吗？我可以使用此界面保留商店并订阅仅检测商店的 selectedProject 部分的更改吗？

Answer 1

我相信您正在寻找distinctKeyUntilChanged .

this.store.select('app')
  //Only emit when selectedProject has changed
  .distinctUntilKeyChanged(
    //Key to filter on
    'selectedProject',
    //Optional comparison function if you have a specific way of comparing keys 
    (x, y) => x.projectName === y.projectName)
  .pluck('selectedProject')
  .subscribe((project: IProject) => {});