Pipe and Tap VS 使用 ngxs 订阅

Question

我正在玩管道和订阅。如果我使用带水龙头的管道，则控制台中不会登录任何内容。如果我使用订阅，它就可以工作。那我做错了什么？

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);
})

我正在使用 RxJs 6、TypeScript 和 ngxs 作为存储在 Angular 6.

Answer 1

知道了！我必须附加 subscribe()。原来是：

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

Answer 2

我的回答分为两部分...您问的和您需要的。 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);

Answer 3

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

但是，在您的情况下，您忘记了 "subscribe()" 到您的 Observable，这就是为什么您在控制台中看不到 "User Data" 的原因。

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

Pipe and Tap VS 使用 ngxs 订阅

Pipe and Tap VS subscribe with ngxs

tap

pipe

rxjs

angular

ngxs