RxJSのSubjectメモ - 寝て起きて寝て

Subjectとは

通常subscribeしたタイミングでデータは流れていってしまうまたobservalだけでは1度しか実行することができない

任意のタイミングでデータを流したい場合に使える機能

これはobservableを継承していて任意のタイミングでデータを流せる特徴を持っている

またsubscribeするときにコールバックを含む処理のことをオブザーバーと呼ぶ下のnext部分

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

これはイベントリスナーのようなものでこの配列を保持している

配列とはどういうことかというと下記のような場合ログではobserverAとBがそれぞれ1回ずつ動いていることがわかるつまり上書きされない

nextメソッドを実行するとObservableのストリームが流れる引数に指定したデータが流れる

const subject = new Subject<number>();
 
subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});
 
subject.next(1);
subject.next(2);
// Logs:
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2

開発では Observable単体よりもSubjectを使用することが多い

Subjectの使い方

service側でSubjectを初期化して、Componentからservice経由でSubjectを監視する。そして任意のタイミング（ボタン押下など）でSubjectがストリームでデータを流して複数のComponentへ変更を伝える

サービスの実装例

private searchTerms = new Subject<string>()
public searchTerms$ = this.searchTerms.asObservable()

public search(term:string): void{
  this.searchTerms.next(term)
}

上の例では Subject型のsearchTermsを初期化して保持する次に任意のタイミングで実行できるようにsearchメソッドを定義してその中でnextメソッドを実行する。

そして他のコンポーネントから参照できるように asObservableメソッドを使い、publicでsearchTerms$を定義するこれをするとObservableを取得できるようになる直接nextを呼べないようにする（setter的な意味を持たせるような処理）

コンポーネントの実装例

コンポーネントでは該当のサービスを宣言して、任意のタイミングで呼び出せるようにsearchメソッドを実行する

construcotr(
  private searchService:SearchService,
  private memberService: MemberService
){}

search(term: string): void{
  this.searchService.search(term)
}