为啥我应该在 Angular 订阅中使用 select 和管道？

Posted 2023-03-16

【中文标题】为啥我应该在 Angular 订阅中使用 select 和管道？

【英文标题】：Why should I use select with pipe in Angular subscribe?为什么我应该在 Angular 订阅中使用 select 和管道？

【发布时间】：2020-03-11 07:37:25

【问题描述】：

我正在阅读 angular 的文档及其对 RxJS 库的使用。 我找到了这个信息

Pipes

您可以使用管道将运算符链接在一起。管道让您结合 多个功能合并为一个功能。 pipe() 函数需要 作为它的参数你想要组合的函数，并返回一个新的 执行时按顺序运行组合函数的函数。

所以管道的目的是链接多个函数，但让我好奇的是，我见过很多次使用pipe，里面只有一个函数，例如：

this.itemSubscription = this.store
            .pipe(select(state => state.items.root))
            .subscribe(state => 
                this.items = state.items;
            );

当我尝试使用 select 而不使用 pipe 时，我的 tslint 会说：

select 已弃用：从 6.1.0 开始。使用可管道选择运算符 反而。 (弃用)tslint(1)

为什么会这样？我错过了什么吗？网上找不到相关的解释。

【问题讨论】：

即使只有一个运算符可以应用，也必须使用 pipe() 来应用它。运算符是函数，而不是 Observable 的方法。

pipe() 最多接受十个运算符函数，因此使用 .pipe(select(...)) 只需 pipe() 和一个运算符，这是完全正确的。

(1) RxJS 在版本 6 中移至 pipable 运算符，不再支持点链运算符。如果您想知道为什么阅读此内容：pipeable-operators。 (2) NgRx 首先在 6.1.0 中弃用了 store.select，然后在 7.0.0-beta0 中弃用了它，参见 this discussion。因此，您可以根据需要使用 store.select，因为它在当前的 ngrx 版本中并未被弃用。

【参考方案1】：

Pipe 在 v5.5 中被引入 RxJS 获取如下所示的代码：

of(1,2,3).map(x => x + 1).filter(x => x > 2);

把它变成这个

of(1,2,3).pipe(
  map(x => x + 1),
  filter(x => x > 2)
);

相同的输出，相同的概念，但语法不同。

它清理了 'observable.prototype' 并使 RxJS 库更可摇树，你只需要导入你使用的东西。它还使编写和使用第三方运算符更容易。

【参考方案2】：

使用 lettable 运算符被认为是最佳实践。因为您只能将您需要的特定运算符导入到您的项目中。其余的可以通过摇树移除，因此包的大小正在减小。

刚开始使用管道和一个运算符似乎有点奇怪，但你会习惯的。

【参考方案3】：

你在混合东西。

select 已弃用：从 6.1.0 开始。使用可管道选择运算符 反而。 (弃用)tslint(1)

指在pipe之外使用select。

this.store.select( ... )

在pipe 中使用select 是可行的方法。

import  Store, select  from '@ngrx/store';

this.store.pipe(select( ... ))

完全没问题。