Pipe and Tap VS 使用 ngxs 订阅

Posted 2023-02-19

【中文标题】Pipe and Tap VS 使用 ngxs 订阅

【英文标题】：Pipe and Tap VS subscribe with ngxs

【发布时间】：2018-10-29 04:03:54

【问题描述】：

我正在玩管道并订阅。如果我使用带有水龙头的管道，则不会登录控制台。如果我使用订阅，它正在工作。那么我做错了什么？

import  Observable  from 'rxjs';
import  tap, take  from 'rxjs/operators';

this.store.select(state => state.auth.authUser).pipe(
  take(1),
  tap((data) => 
    //Not Working - no console output
    console.log('[Tap] User Data', data);

  )
);

this.store.select(state => state.auth.authUser).subscribe((data) => 
  // Working - user data output in console
  console.log('[Subscribe] User Data', data);
)

我在 Angular 6 中使用 RxJs 6、TypeScript 和 ngxs 作为存储。

【参考方案1】：

我的答案分为两部分......你问什么，你需要什么?。 Observable 的值仅在有活动订阅时流经管道运算符。这就是您看到这种行为的原因。所以你应该这样做：

this.store.select(state => state.auth.authUser).pipe(
  take(1),
  tap((data) => 
    console.log('[Tap] User Data', data)
  )
).subscribe();

但您似乎正在寻找的是状态快照。你可以这样做：

let data = this.store.selectSnapshot(state => state.auth.authUser);
console.log('[selectSnapshot] User Data', data);

【参考方案2】：

知道了！我必须附加订阅（）。原来如此：

this.store.select(state => state.auth.authUser).pipe(
  take(1),
  tap((data) => 
    console.log('[Tap] User Data', data)
  )
).subscribe();

【参考方案3】：

tap（或旧版 RxJS 中的 do）-> 透明地执行操作或副作用，例如日志记录（正如定义已经说过的）。

但是，在您的情况下，您忘记“订阅（）”到您的 Observable，这就是您在控制台中看不到您的“用户数据”的原因。

另一方面，在第二种情况下，您已经订阅了一个 Observable。