ngrx 商店选择仅订阅特定操作

Posted 2023-02-19

【中文标题】ngrx 商店选择仅订阅特定操作

【英文标题】：ngrx store select subscribe only for specific actions

【发布时间】：2019-08-18 16:00:03

【问题描述】：

我想知道是否可以按操作过滤 store.select 订阅（就像我们在效果中所做的那样）。请看下面的代码：

this.store
  .select(mySelector)
  .subscribe(obj =>  . //FILTER SUBSCRIPTION BY ACTION 
    this.object = obj; 
  );

每次当一个动作被调度（不管是哪个动作）时，每个具有 store.select.subscribe 的活动组件（未销毁且未取消订阅）都会被调用。

如果我们的应用程序有 100 个操作，则每次触发 1 个操作时，都会调用所有活动组件（未销毁或取消订阅）store.select.subscribe。 （如果影响组件的状态没有改变，我知道我们不会有任何问题，因为状态仍然相同）。

我为什么要问这个问题？

有时当影响组件的状态发生变化时，我需要在组件中执行一些操作。所以，每次我需要做一个 if 语句来检查对象是否已经改变。如果我有操作过滤器，则不再需要此 if 语句，因为我过滤了影响我的组件的特定操作的订阅。请参阅下面显示此 if 语句的代码：

myObject: any; //global object of my component


  constructor(
    private store: Store<AppState>,
  ) 
    this.store
      .select(mySelector)
      .subscribe(obj => 
        if(obj.id !== myObject.id) //changed
          this.myObject = obj;
          doSomeActionInMyComponent()
         else 
          this.myObject = obj;
        
      );
  

  doSomeActionInMyComponent() 
      //do some action using this.myObject
  

这是我的想法还是我误解了ngrx概念？我应该为此使用其他类似效果的东西吗？

提前致谢。

【参考方案1】：

这是不可能的，选择器会对状态变化做出反应。

当你调度一个动作时，我确实觉得每个选择器都发出一个新结果有点奇怪。只有受状态变化影响的选择器才会发出新的结果，这是因为选择器内部正在缓存输入，如果输入没有变化，它就不会执行。

来自docs：

使用 createSelector 和 createFeatureSelector 函数时，@ngrx/store 会跟踪调用选择器函数的最新参数。因为选择器是纯函数，所以当参数匹配时可以返回最后一个结果，而无需重新调用选择器函数。这可以提供性能优势，特别是对于执行昂贵计算的选择器。这种做法称为记忆。

如果你有复制品，我很乐意看看。

【参考方案2】：

您可以改为订阅 Action，但无论如何这都不是一个好习惯。

constructor(action$: Actions) 
        action$.pipe(
           ofType(YourAction.ANY_ACTION),
           takeUntil(this.destroyed$)
        )
        .subscribe(() => 
          ...
        );