Pipe and Tap VS subscribe with ngxs

Question

I am playing around with pipe and subscribe. If I am using pipe with tap, nothing will log in console. If I am using subscribe, it's working. So what I am doing wrong?

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

I am using RxJs 6, TypeScript and ngxs as store in Angular 6.

Answer 1

My answer is in two parts... What you asked, and what you need . The values of an Observable only flow through the pipe operators when there is an active subscription. That is why you are seeing this behaviour. So you should do something like this:

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

But what it seems that you are looking for is a state snapshot. You can do this as follows:

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

Answer 2

tap (or do in the old version of RxJS) -> Transparently perform actions or side-effects, such as logging (as definition already says).

But, in your case, you forgot to "subscribe()" to your Observable and that's why you don't see your "User Data" in the Console.

On the other hand, in the second case, you already subscribe to an Observable.

Answer 3

Got it! I have to append subscribe(). So it is:

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