Bagaimana cara mendapatkan nilai saat ini dari Subjek atau Observasi RxJS?

Saya memiliki layanan 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);
    });
  }
}

Semuanya bekerja dengan baik. Tapi saya punya komponen lain yang tidak perlu berlangganan, hanya perlu mendapatkan nilai isLoggedIn saat ini pada titik waktu tertentu. Bagaimana saya bisa melakukan ini?

A Subjectatau Observabletidak memiliki nilai saat ini. Ketika suatu nilai dipancarkan, nilai itu diteruskan ke pelanggan dan Observableselesai dengan itu.

Jika Anda ingin memiliki nilai saat ini, gunakan BehaviorSubjectyang dirancang untuk tujuan tersebut. BehaviorSubjectmenyimpan nilai yang dipancarkan terakhir dan segera memancarkannya ke pelanggan baru.

Ini juga memiliki metode getValue()untuk mendapatkan nilai saat ini.

Satu-satunya cara Anda harus mendapatkan nilai "keluar dari" Subjek yang Dapat Diamati / adalah dengan berlangganan!

Jika Anda menggunakan getValue()Anda melakukan sesuatu yang penting dalam paradigma deklaratif. Itu ada di sana sebagai pintu keluar darurat, tetapi 99,9% dari waktu Anda TIDAK boleh menggunakan getValue(). Ada beberapa hal menarik yang getValue()akan dilakukan: Ini akan melempar kesalahan jika subjek telah berhenti berlangganan, itu akan mencegah Anda dari mendapatkan nilai jika subjek mati karena itu salah, dll. Tapi, sekali lagi, itu ada sebagai pelarian menetas untuk keadaan langka.

Ada beberapa cara untuk mendapatkan nilai terbaru dari Subjek atau Dapat Diamati dengan cara "Rx-y":

1. Menggunakan BehaviorSubject: Tapi sebenarnya berlangganan itu . Ketika Anda pertama kali berlangganan BehaviorSubjectakan secara sinkron mengirim nilai sebelumnya diterima atau diinisialisasi dengan.
2. Menggunakan ReplaySubject(N): Ini akan men-cache Nnilai dan memutar ulang ke pelanggan baru.
3. A.withLatestFrom(B): Gunakan operator ini untuk mendapatkan nilai terbaru dari yang dapat diamati Bsaat Adipancarkan. Akan memberi Anda kedua nilai dalam array [a, b].
4. A.combineLatest(B): Gunakan operator ini untuk mendapatkan nilai terbaru dari Adan Bsetiap kali salah satu Aatau Bmemancarkan. Akan memberi Anda kedua nilai dalam array.
5. shareReplay(): Membuat multicast yang Dapat Diobservasi melalui a ReplaySubject, tetapi memungkinkan Anda untuk mencoba lagi kesalahan yang dapat diamati. (Pada dasarnya itu memberi Anda perilaku caching janji-y).
6. publishReplay(), publishBehavior(initialValue), multicast(subject: BehaviorSubject | ReplaySubject), Dll: operator lain bahwa leverage BehaviorSubjectdan ReplaySubject. Rasa berbeda dari hal yang sama, mereka pada dasarnya multicast sumber yang dapat diamati dengan menyalurkan semua pemberitahuan melalui subjek. Anda perlu menelepon connect()untuk berlangganan ke sumber dengan subjek.

Saya memiliki situasi yang sama di mana pelanggan yang terlambat berlangganan ke Subjek setelah nilainya tiba.

Saya menemukan ReplaySubject yang mirip dengan BehaviorSubject berfungsi seperti pesona dalam kasus ini. Dan di sini ada tautan ke penjelasan yang lebih baik: 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
// .................
// .................
// .................

Anda dapat memeriksa artikel lengkap tentang cara mengimplementasikannya dari sini. https://www.imkrish.com/how-to-get-current-value-of-observable-in-a-clean-way/

Saya mengalami masalah yang sama dalam komponen anak di mana awalnya harus memiliki nilai saat ini dari Subjek, kemudian berlangganan Subjek untuk mendengarkan perubahan. Saya hanya mempertahankan nilai saat ini di Layanan sehingga tersedia untuk komponen untuk diakses, misalnya:

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

Komponen yang membutuhkan nilai saat ini dapat mengaksesnya dari layanan, yaitu:

sessionStorage.isLoggedIn

Tidak yakin apakah ini praktik yang benar :)

Sebuah serupa mencari jawaban downvoted. Tapi saya pikir saya bisa membenarkan apa yang saya sarankan di sini untuk kasus-kasus terbatas.

Meskipun benar bahwa yang diamati tidak memiliki nilai saat ini , sangat sering itu akan memiliki nilai yang segera tersedia . Misalnya dengan toko redux / fluks / akita Anda dapat meminta data dari toko pusat, berdasarkan sejumlah yang dapat diobservasi dan nilai itu umumnya akan segera tersedia.

Jika demikian, maka ketika Anda subscribe, nilainya akan segera kembali.

Jadi misalkan Anda melakukan panggilan ke layanan, dan pada penyelesaian Anda ingin mendapatkan nilai terbaru dari sesuatu dari toko Anda, yang mungkin tidak akan memancarkan :

Anda mungkin mencoba melakukan ini (dan Anda harus sedapat mungkin menjaga barang-barang 'di dalam pipa'):

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

                        // we have serviceCallResponse and customer 
                     });

Masalah dengan ini adalah bahwa hal itu akan memblokir sampai yang diamati diamati nilai sekunder, yang berpotensi tidak pernah.

Saya menemukan diri saya baru-baru ini perlu mengevaluasi yang dapat diamati hanya jika nilai segera tersedia , dan yang lebih penting saya harus dapat mendeteksi jika tidak. Saya akhirnya melakukan ini:

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

Perhatikan bahwa untuk semua hal di atas saya menggunakan subscribeuntuk mendapatkan nilai (seperti @Ben membahas). Tidak menggunakan .valueproperti, bahkan jika saya punya BehaviorSubject.

Meskipun mungkin terdengar berlebihan, ini hanyalah solusi "mungkin" untuk menjaga tipe yang dapat diamati dan mengurangi ...

Anda selalu dapat membuat pengambil ekstensi untuk mendapatkan nilai saat ini dari Observable.

Untuk melakukan ini, Anda perlu memperluas Observable<T>antarmuka dalam global.d.tsfile deklarasi pengetikan. Kemudian implementasikan pengambil ekstensi dalam sebuah observable.extension.tsfile dan akhirnya sertakan juga pengetikan dan ekstensi file ke aplikasi Anda.

Anda dapat merujuk pada Jawaban StackOverflow ini untuk mengetahui cara memasukkan ekstensi ke aplikasi Angular Anda.

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

Anda dapat menyimpan nilai yang dipancarkan terakhir secara terpisah dari Observable. Kemudian bacalah saat dibutuhkan.

let lastValue: number;

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

Cara terbaik untuk melakukannya adalah menggunakan Behaviur Subject, berikut ini sebuah contoh:

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

Langganan dapat dibuat dan setelah barang yang dipancarkan pertama dimusnahkan. Pipa adalah fungsi yang menggunakan Observable sebagai input dan mengembalikan Observable lain sebagai output, sementara tidak memodifikasi observable pertama. 8.1.1 sudut. Paket: "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);
      });

    }
  }