@ngrx/store 订阅商店的一部分并避免检测对其他部分的更改

Question

背景

我商店中的一个减速器处理在应用程序中选择的东西。这家商店的界面（我们称之为 app）可能如下所示：

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

所以我想要一个仅在选择不同的 'project' 时才执行操作的订阅。我写了这样的东西：

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

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

问题

我不希望这种情况发生。我只希望我的函数在 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) => {});

@ngrx/store 订阅商店的一部分并避免检测对其他部分的更改

@ngrx/store subscription to part of a store and avoid detecting changes to other parts

rxjs

ngrx

angular