【RxJS】Observable・Observerの基本

結論

通知機能の実現

• Observable：通知を受け取れるようにする仕組みを提供するオブジェクト
• Observer：通知を受け取ったときの対応方法を持つ側

import { Observable } from 'rxjs';

// ① 通知する仕組みを作る
const observable = new Observable<string>(subscriber => {
  subscriber.next('速報：新しいニュースです');
  subscriber.next('続報：詳しい情報が入りました');
  subscriber.complete();
});

// ② 通知を受け取ったときの対応方法を作る
const observer = {
  next: (value: string) => {
    console.log('ニュース:', value);
  },

  error: (error: Error) => {
    console.log('エラー:', error.message);
  },

  complete: () => {
    console.log('配信終了');
  }
};

// ③ 購読を開始する
observable.subscribe(observer);

→subscribe() が呼ばれた瞬間にコンソール表示が始まる

詳細

Observable

Observableは、値を通知する仕組みを提供するオブジェクト

import { Observable } from 'rxjs';

const observable = new Observable<string>(subscriber => {
//文字列を通知
  subscriber.next('速報：新しいニュースです');
  subscriber.next('続報：詳しい情報が入りました');
  subscriber.complete();
});

• <string> は、このObservableが通知する値の型が string ってこと
• 基本的に このObservableのsubscribe()がコールされた際に、引数に渡しているコールバック関数が実行される

コールバック関数の処理

• 引数subscriber はRxJS側からコールバック関数に渡されるオブジェクトを表す
• このオブジェクトが通知を送るメソッドをもつ

Observer

• 通知を受け取ったら何をするかをまとめるオブジェクト
• 以下の三つのメソッドで実現：

const observer = {
  next: (value: string) => {
    console.log('ニュース:', value);
  },

  error: (error: Error) => {
    console.log('エラー:', error.message);
  },

  complete: () => {
    console.log('配信終了');
  }
};

では、Observerはどうやって通知を受け取るのか？
→Observableのsubscribe()

subscribe()

→Observableがsubscribe()をコールして「通知を受け取る者」であるObserverに通知を実行(コールバック関数の実行)

observable.subscribe(observer);

• subscribe()のコールでObservableのコールバック関数が呼ばれる
• つまり、subscribe() を呼んだ回数だけ、通知を発生させる処理が実行される
• また、引数にはObserverを渡す以外にも、Observer オブジェクトの next にあたる処理だけを、直接渡すこともできる

observable.subscribe(value => {
  console.log('ニュース:', value);
});

subscribe()の戻り値はSubscriptionオブジェクト

Subscriptionオブジェクト

• Observableの購読を管理するためのオブジェクト
• 例：unsubscript()→その Observer が Observable から通知を受け取るための「購読」を解除する

import { Observable, Subscription } from 'rxjs';

const observable = new Observable<string>(subscriber => {
  subscriber.next('速報：新しいニュースです');
  subscriber.next('続報：詳しい情報が入りました');
});

const subscription: Subscription = observable.subscribe(value => {
  console.log(value);
});