为什么我应该在 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 版本中并未被弃用。

标签： angular select rxjs pipe store

【解决方案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( ... ))

完全没问题。

【讨论】：