web-dev-qa-db-fra.com

Pipe and Tap VS s'abonner avec ngxs

Je joue avec pipe et abonnez-vous. Si j'utilise un tuyau avec robinet, rien ne se connectera à la console. Si j'utilise subscribe, cela fonctionne. Alors qu'est-ce que je fais mal?

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

J'utilise RxJs 6, TypeScript et ngxs comme magasin dans Angular 6.

3
Paul

Ma réponse est en deux parties ... Ce que vous avez demandé et ce dont vous avez besoin ???? . Les valeurs d'un observable ne sont transmises aux opérateurs de canal que lorsqu'il existe un abonnement actif. C'est pourquoi vous voyez ce comportement. Donc, vous devriez faire quelque chose comme ça:

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

Mais il semblerait que vous recherchiez un instantané d'état. Vous pouvez le faire comme suit:

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

Je l'ai! Je dois ajouter subscribe (). Donc c'est:

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

"tapez" (ou "faites" dans l'ancienne version de RxJS) -> Effectuez en toute transparence des actions ou des effets secondaires, tels que la journalisation (comme le dit la définition). Mais, dans votre cas, vous avez oublié de "subscribe ()" pour votre observable et c'est pourquoi vous ne voyez pas vos "données d'utilisateur" dans la console.

Par contre, dans le second cas, vous vous abonnez déjà à un observable.

0
Dionis Oros