使用時RXJSサブジェクト、BehaviorSubject、ReplaySubject、AsyncSubject、または角度の空の件名

角には多くの種類のオブザーバブルがあります.たぶん、あなたは、角度の例では、件名、行動、replaysubject、またはasyncsubjectを見てきたし、彼らが何であるかを疑問に思うとき、それらを使用することができます.
このポストでは、それらのタイプのものが何であるか、そして、あなたがそれらを使うべきであるかに深く潜りたいです.ので、バックルと乗り心地をお楽しみください.


目次

Subject

BehaviourSubject

ReplaySubject

AsyncSubject

Void Subject

主題は何か
rxjsは角度での反応性の原因である.主題はRXJSライブラリから観測可能な特定のタイプです.

If you don't know what an Observable is, check this post by "Understanding RxJS Observables and why you need them" on the LogRocket blog.

ユニキャスト

観測可能なユニキャスト.
観測者とその加入者は1対1の関係を有する.各購読オブザーバはオブザーバブルの独立した実行を所有します.

マルチキャスト

定期的に観測可能であると比較して、被験者は多くの観測者に値をマルチキャストすることができます.被験者とその加入者は1対多の関係を有する.
被験者は観察者と同様に観察できる.彼らは多くのリスナーのレジストリを複数のオブザーバブルに保持します.


コードで観察可能な対主題
観測可能と対象はAPIを共有する.どちらも同じ方法とどのようにそれらを作成します.しかし、彼らは非常に異なって振る舞う.
コードで見る

import { Observable } from "rxjs"

const observable = new Observable(subscriber => {
    subscriber.next(1);
    subscriber.next(2);
    subscriber.next(3);
    subscriber.complete();
});

console.log('just before subscribe');

// Subscriber 1
observable.subscribe({
  next(x) { console.log('sub1: got value ' + x); },
  error(err) { console.error('sub1: something wrong occurred: ' + err); },
  complete() { console.log('sub1: done'); }
});

// Subscriber 2
observable.subscribe({
  next(x) { console.log('sub2: got value ' + x); },
  error(err) { console.error('sub2: something wrong occurred: ' + err); },
  complete() { console.log('sub2: done'); }
});

console.log('just after subscribe');

Working example
ここでは、データが最初の加入者に送られ、次の加入者に続く前に終了することがわかります.

In the RxJS documentation, they are describing that "Each call to observable.subscribe triggers its independent setup for that given subscriber".

それはすべての加入者が互いに独立して実行している理由です.しかし、RXJSチームは、作成する方法を提供しますmulticasted Obsevables ."
コードの主題

import { Subject } from "rxjs"

const subject = new Subject();

 // Subscriber 1
subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});

subject.next(1);

// Subscriber 2
subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

subject.next(2);

Working example
件名では、件名がリードを取る見ることができます.これは、待機の代わりに両方の加入者にメッセージを送信します.私の意見では、これは明らかに定期的に観察可能との間の違いを示しています.
The RxJS documentation 次のように言います.

Internally to the Subject, subscribe does not invoke a new execution that delivers values. It simply registers the given Observer in a list of Observers, similarly to how addListener usually works in other libraries and languages.

主題
私たちはSubject はObservable . しかし、1つの加入者に情報を送る代わりに、彼らは同時に複数の加入者に彼らのデータを送ることができます(彼らは、マルチキャスト).
エーSubject 使用できる3つのメソッドがあります.

subscribe このメソッドを使用すると、新しい加入者のサブスクリプションをアクティブにすることができます.

next このメソッドを使用すると、新しい値を渡すことができます.すべての現在の加入者は、これを受けます.

complete このメソッドを使用すると、対象にすべてのサブスクリプションを閉じることができます.

重要な詳細は、主題が初期値を持たないということです.すべての値がnext メソッドはすべての購読者に値を送ります.
しかし、加入者が購読される前に値がすでに送られるなら、それはそのデータを受けません.をクリックします.

const rxjs = require('rxjs');
const { Subject } = rxjs

const subject = new Subject();

 // Subscriber 1
subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});

subject.next(1);

// Subscriber 2
subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

subject.next(2);

Working example


行動学科
The BehaviourSubject はSubject . このバリアントは、現在の値Subject です.
現在の加入者にデータを送信している場合には、非常に有用となる.しかし、別の加入者は、後の瞬間に導入されます.現在の値をその加入者に渡すこともあります.とBehaviourSubject あなたはそれを行うことができます.をクリックします.

import { BehaviorSubject } from "rxjs"

const subject = new BehaviorSubject(0); // 0 is the initial value

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});

subject.next(1);
subject.next(2);

subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

subject.next(3);

Working example
したがって、BehaviourSubject 加入者に最後の既知の値を与えるObservable . しかし、あなたが前の値より少しを望むならば、どうですか?


演題
The ReplaySubject それは言う.それは新しい加入者に値の一定量を再生することができます.
DJが遊んでいるオンラインプレイリストを考えてください.しかし、あなたはそのストリームに戻りたいです.The ReplaySubject することができます3つのトラックを反転し、そこからリスニングを開始することを確認します.をクリックします.

import { ReplaySubject } from "rxjs" 

const subject = new ReplaySubject(2); // buffer 3 values for new subscribers

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});

subject.next(1);
subject.next(2);
subject.next(3);

subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

subject.next(4);
subject.next(5);

Working example
あなたが見ることができるようにReplaySubject(2) , 私はナンバー2を通過しましたSubject すべての新しい加入者に最後の2つの値を送る必要があること.
その新しい加入者が渡された値を受け取ったとき、それは他の加入者と同期しています.
しかし、それを確認するにはReplaySubject(10000) すべての新しい加入者に一定の値を渡すことはありません、我々はそれに制限時間を与えることができます.以下の例では、メモリに100の値を保持し、新しい加入者に渡すことができますが、それらの値は500ミリ秒で有効です.

const subject = new ReplaySubject(100, 500);

この機能は多くの可能性を与えるので、それでスマートにしてください.


非対象
私が見たときAsyncSubject そして、それが完了したとき、それが加入者に最新の価値を送るだけであるのを見て、私は「なぜ私はこれを使いたいですか?」と思いました.見るまでthis post on Medium .
それで、これはある考えを与えましたAsyncSubject AJAXリクエストの大きな候補です.ほとんどの要求を得るため、あなたは1つだけの応答を待つつもりだ、右.

import { AsyncSubject } from "rxjs"

const subject = new AsyncSubject();

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});

subject.next(1);
subject.next(2);
subject.next(3);
subject.next(4);

subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});

subject.next(5);
subject.complete();

Working example
上記の「実行」ボタンをクリックすると、AsyncSubject 複数の値を渡しますが、complete() メソッドが呼び出されます.


空隙
あなたがAを使うシナリオの大部分でSubject 加入者と共に、あなたが通過した値へのアクセスを得ることは関連しています.しかし、実際の値を必要としないが、イベントにフックするだけで、値を必要としない場合.それはあなたがvoid subjectを使用するときです.
のデフォルトの動作Subject それだけです.をクリックします.

import { Subject } from "rxjs"

const subject = new Subject(); // Shorthand for Subject<void>

subject.subscribe({
  next: () => console.log('One second has passed')
});

setTimeout(() => subject.next(), 1000);

Working example


結論
これを包んで、レギュラーを必要とするときに終わりましょうObservable またはSubject 種類

…を観察できる
レギュラーObservable つの加入者を必要とするときに使用されるべきです.または、最初に来る加入者が第2が値を得るまで、最初に終えられることを気にしないでください.

…を使う
あなたが複数の加入者と注意が必要とするとき、すべての加入者は同時に彼らの新しい価値を得ていますSubject .

使用するBehaviourSubject ときに、最後の指定値が必要です.

使用するReplaySubject ときに、最後の指定値よりも必要があります.(例えば、前の5つの値)または値のタイムウィンドウを設定したい場合は、定期的に購読者に送ることができます.

使用するAsyncSubject 最後の値が購読者に渡されるだけであるとき.

無効にするSubject 任意の値を渡すだけではなく、イベントにフックしたい場合.

うまくいけば、これはあなたが正しい選択をするのを助ける!


ありがとう

私はあなたが何か新しいことを学んだか、この物語を読んだ後、何か新しいものを作成することに触発されて願っています!🤗 もしそうならば、電子メール(このページの最上部へスクロールする)を通して購読するか、HashNodeでここで私について来てください.
*

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

私が質問または何かを応答として言うためにあなたを残したならば、スクロールして、私にメッセージを入力してください.あなたがそれを秘密にしたいとき、私に送ってください.私のDMは常に開いている😁