Comment obtenir la valeur actuelle du sujet RxJS ou observable?

J'ai un service Angular 2:

import {Storage} from './storage';
import {Injectable} from 'angular2/core';
import {Subject}    from 'rxjs/Subject';

@Injectable()
export class SessionStorage extends Storage {
  private _isLoggedInSource = new Subject<boolean>();
  isLoggedIn = this._isLoggedInSource.asObservable();
  constructor() {
    super('session');
  }
  setIsLoggedIn(value: boolean) {
    this.setItem('_isLoggedIn', value, () => {
      this._isLoggedInSource.next(value);
    });
  }
}

Tout fonctionne très bien. Mais j'ai un autre composant qui n'a pas besoin de s'abonner, il a juste besoin d'obtenir la valeur actuelle d'isLoggedIn à un certain moment. Comment puis-je faire ceci?

A Subjectou Observablen'a pas de valeur actuelle. Lorsqu'une valeur est émise, elle est transmise aux abonnés et le Observablefait avec elle.

Si vous souhaitez avoir une valeur actuelle, utilisez celle BehaviorSubjectqui est conçue exactement à cette fin. BehaviorSubjectconserve la dernière valeur émise et la transmet immédiatement aux nouveaux abonnés.

Il dispose également d'une méthode getValue()pour obtenir la valeur actuelle.

La seule façon que vous devriez être obtenir des valeurs « sur » un Observable / sujet est subscribe!

Si vous utilisez, getValue()vous faites quelque chose d'impératif dans le paradigme déclaratif. Il est là comme une trappe d'évacuation, mais 99,9% du temps, vous ne devriez PAS l'utiliser getValue(). Il y a quelques choses intéressantes quigetValue() faire: cela générera une erreur si le sujet a été désabonné, il vous empêchera d'obtenir une valeur si le sujet est mort parce qu'il est erroné, etc. Mais, encore une fois, il est là comme une échappatoire trappe pour de rares circonstances.

Il existe plusieurs façons d'obtenir la dernière valeur d'un sujet ou observable de manière "Rx-y":

1. En utilisant BehaviorSubject: mais en y souscrivant . Lorsque vous vous abonnez pour la première fois àBehaviorSubject il envoie de manière synchrone la valeur précédente qu'il a reçue ou a été initialisée avec.
2. Utilisation d'un ReplaySubject(N): cela mettra en cacheN valeurs et les rejouera aux nouveaux abonnés.
3. A.withLatestFrom(B): Utilisez cet opérateur pour obtenir la valeur la plus récente de l'observable Blors de son Aémission. Vous donnera les deux valeurs dans un tableau [a, b].
4. A.combineLatest(B): Utilisez cet opérateur pour obtenir les valeurs les plus récentes de Aet Bchaque fois que ce soit Aou Bémet. Vous donnera les deux valeurs dans un tableau.
5. shareReplay(): Effectue une multidiffusion observable via un ReplaySubject, mais vous permet de réessayer l'observable en cas d'erreur. (Fondamentalement, cela vous donne ce comportement de mise en cache prometteur).
6. publishReplay(), publishBehavior(initialValue), multicast(subject: BehaviorSubject | ReplaySubject), Etc: D' autres opérateurs qui tirent parti BehaviorSubjectet ReplaySubject. Différentes saveurs de la même chose, elles diffusent essentiellement la source observable en canalisant toutes les notifications via un sujet. Vous devez appeler connect()pour vous abonner à la source avec le sujet.

J'ai eu une situation similaire où les abonnés tardifs s'abonnent au sujet après que sa valeur soit arrivée.

J'ai trouvé ReplaySubject qui est similaire à BehaviorSubject fonctionne comme un charme dans ce cas. Et voici un lien pour une meilleure explication: http://reactivex.io/rxjs/manual/overview.html#replaysubject

const observable = of('response')

function hasValue(value: any) {
  return value !== null && value !== undefined;
}

function getValue<T>(observable: Observable<T>): Promise<T> {
  return observable
    .pipe(
      filter(hasValue),
      first()
    )
    .toPromise();
}

const result = await getValue(observable)
// Do the logic with the result
// .................
// .................
// .................

Vous pouvez consulter l'article complet sur la façon de l'implémenter à partir d'ici. https://www.imkrish.com/how-to-get-current-value-of-observable-in-a-clean-way/

J'ai rencontré le même problème dans les composants enfants où initialement il devrait avoir la valeur actuelle du sujet, puis s'abonner au sujet pour écouter les modifications. Je conserve simplement la valeur actuelle du service afin qu'elle soit accessible aux composants, par exemple:

import {Storage} from './storage';
import {Injectable} from 'angular2/core';
import {Subject}    from 'rxjs/Subject';

@Injectable()
export class SessionStorage extends Storage {

  isLoggedIn: boolean;

  private _isLoggedInSource = new Subject<boolean>();
  isLoggedIn = this._isLoggedInSource.asObservable();
  constructor() {
    super('session');
    this.currIsLoggedIn = false;
  }
  setIsLoggedIn(value: boolean) {
    this.setItem('_isLoggedIn', value, () => {
      this._isLoggedInSource.next(value);
    });
    this.isLoggedIn = value;
  }
}

Un composant qui a besoin de la valeur actuelle pourrait simplement y accéder à partir du service, c'est-à-dire:

sessionStorage.isLoggedIn

Je ne sais pas si c'est la bonne pratique :)

Une semblable recherche réponse a été downvoted. Mais je pense que je peux justifier ce que je propose ici pour des cas limités.

S'il est vrai qu'un observable n'a pas de valeur actuelle , il aura très souvent une valeur immédiatement disponible . Par exemple, avec les magasins redux / flux / akita, vous pouvez demander des données à un magasin central, sur la base d'un certain nombre d'observables et cette valeur sera généralement immédiatement disponible.

Si tel est le cas, lorsque vous subscribe, la valeur reviendra immédiatement.

Supposons donc que vous ayez appelé un service et, une fois terminé, vous souhaitez obtenir la dernière valeur de quelque chose de votre magasin, qui pourrait ne pas émettre :

Vous pourriez essayer de le faire (et vous devriez autant que possible garder les choses «à l'intérieur des tuyaux»):

 serviceCallResponse$.pipe(withLatestFrom(store$.select(x => x.customer)))
                     .subscribe(([ serviceCallResponse, customer] => {

                        // we have serviceCallResponse and customer 
                     });

Le problème avec cela est qu'il se bloquera jusqu'à ce que l'observable secondaire émette une valeur, qui pourrait potentiellement ne jamais l'être.

Je me suis retrouvé récemment à avoir besoin d'évaluer un observable uniquement si une valeur était immédiatement disponible , et plus important encore, j'avais besoin de pouvoir détecter si ce n'était pas le cas. J'ai fini par faire ça:

 serviceCallResponse$.pipe()
                     .subscribe(serviceCallResponse => {

                        // immediately try to subscribe to get the 'available' value
                        // note: immediately unsubscribe afterward to 'cancel' if needed
                        let customer = undefined;

                        // whatever the secondary observable is
                        const secondary$ = store$.select(x => x.customer);

                        // subscribe to it, and assign to closure scope
                        sub = secondary$.pipe(take(1)).subscribe(_customer => customer = _customer);
                        sub.unsubscribe();

                        // if there's a delay or customer isn't available the value won't have been set before we get here
                        if (customer === undefined) 
                        {
                           // handle, or ignore as needed
                           return throwError('Customer was not immediately available');
                        }
                     });

Notez que pour tout ce qui précède, j'utilise subscribepour obtenir la valeur (comme @Ben en parle). Ne pas utiliser de .valuepropriété, même si j'en avais BehaviorSubject.

Bien que cela puisse sembler exagéré, ce n'est qu'une autre solution "possible" pour garder le type observable et réduire le passe-partout ...

Vous pouvez toujours créer un getter d'extension pour obtenir la valeur actuelle d'un observable.

Pour ce faire, vous devez étendre l' Observable<T>interface dans un global.d.tsfichier de déclaration de typage. Ensuite, implémentez l' extension getter dans un observable.extension.tsfichier et incluez enfin à la fois les saisies et le fichier d'extension dans votre application.

Vous pouvez vous référer à cette réponse StackOverflow pour savoir comment inclure les extensions dans votre application angulaire.

// global.d.ts
declare module 'rxjs' {
  interface Observable<T> {
    /**
     * _Extension Method_ - Returns current value of an Observable.
     * Value is retrieved using _first()_ operator to avoid the need to unsubscribe.
     */
    value: Observable<T>;
  }
}

// observable.extension.ts
Object.defineProperty(Observable.prototype, 'value', {
  get <T>(this: Observable<T>): Observable<T> {
    return this.pipe(
      filter(value => value !== null && value !== undefined),
      first());
  },
});

// using the extension getter example
this.myObservable$.value
  .subscribe(value => {
    // whatever code you need...
  });

Vous pouvez stocker la dernière valeur émise séparément de l'Observable. Lisez-le ensuite au besoin.

let lastValue: number;

const subscription = new Service().start();
subscription
    .subscribe((data) => {
        lastValue = data;
    }
);

La meilleure façon de le faire est d'utiliser Behaviur Subject, voici un exemple:

var sub = new rxjs.BehaviorSubject([0, 1])
sub.next([2, 3])
setTimeout(() => {sub.next([4, 5])}, 1500)
sub.subscribe(a => console.log(a)) //2, 3 (current value) -> wait 2 sec -> 4, 5

Un abonnement peut être créé et après avoir pris le premier élément émis détruit. Pipe est une fonction qui utilise un observable comme entrée et renvoie un autre observable comme sortie, sans modifier le premier observable. Angulaire 8.1.0. Forfaits: "rxjs": "6.5.3","rxjs-observable": "0.0.7"

  ngOnInit() {

    ...

    // If loading with previously saved value
    if (this.controlValue) {

      // Take says once you have 1, then close the subscription
      this.selectList.pipe(take(1)).subscribe(x => {
        let opt = x.find(y => y.value === this.controlValue);
        this.updateValue(opt);
      });

    }
  }