Angular NgRx中.select(...)与.pipe(select...)的区别及用法选择

核心差异 #

两种写法在功能上完全等效，最终返回的都是携带products状态的Observable流，唯一区别是封装层级和扩展便利性：

• this.store.select(selectProducts)是NgRx官方提供的语法糖，内部已经封装了pipe(select())的逻辑，是专门为简化选择器调用设计的快捷API
• this.store.pipe(select(selectProducts))是更原生的RxJS调用方式，直接通过管道调用select操作符获取状态

具体使用差异 #

• 无后续流操作时，写法1代码更简洁，少了一层pipe嵌套，可读性更高
• 需要追加其他RxJS操作符（比如过滤、映射、takeUntil生命周期解绑、防抖等）时，写法2的扩展更连贯，不需要额外嵌套pipe：

  // 写法1追加操作符需要额外加pipe
  public products = this.store.select(selectProducts).pipe(
    filter(products => products.length > 0),
    takeUntil(this.destroy$)
  );
  
  // 写法2直接在原有pipe中追加操作符即可
  public products = this.store.pipe(
    select(selectProducts),
    filter(products => products.length > 0),
    takeUntil(this.destroy$)
  );
  

选型建议 #

• 单纯获取状态不需要额外流处理时，优先选写法1，代码更简洁
• 需要追加流处理逻辑、或者团队规范统一要求用原生pipe写法时，选写法2

两种写法没有性能差异，也没有官方的废弃通知，完全可以根据场景和团队规范自由选择。

内容的提问来源于stack exchange，提问作者Nicolas Bodin