RxJS で任意の箇所へイベントを送る

EventEmitter 的なことを RxJS で実現してみました。

• ES2015 で書いてます。
• ソースコード全体は GitHub に置いてます。この投稿の末尾のリンクから参照ください。

次のような RxEventBus クラスおよび RxEvent クラスを用意します。

rx_event_bus.es6

import {Rx} from 'rx';

class RxEventBus {

  constructor() {
    this.subject = new Rx.Subject();
  }

  subscribe(key, action) {
    return this.subject
      .filter(event => event.key === key)
      .map(event => event.value)
      .subscribe(action);
  }

  post(event) {
    this.subject.onNext(event);
  }

}

export const rxEventBus = new RxEventBus();

export class RxEvent {

  constructor(key, value) {
    this.key = key;
    this.value = value;
  }

}

RxEventBus クラスはイベントを仲介するもので、シングルトンインスタンスとして運用します(インスタンス化したものを export)。

具体的には Rx の Subject がイベントを仲介しています。

RxEvent クラスは単にキーと値を保持しているだけのクラスです。キーを用意したのは複数種類のイベントに対応できるようにする為です。値はもし不要であれば空で構いません。

イベントを送る

送る方

RxEvent クラスをインスタンス化し、それを引数に rxEventBus (シングルトンインスタンス) の #post メソッドを呼び出します。

import {rxEventBus, RxEvent} from './rx_event_bus.es6';

// イベントのPOST
rxEventBus.post(new RxEvent('someKey', 'someValue'));

購読する方

rxEventBus (シングルトンインスタンス) の #subscribe メソッドでイベントを購読します。第一引数でどのイベントかをキーで指定し、第二引数でイベント受け取り時に実行する処理を定義します。

import {rxEventBus} from './rx_event_bus.es6';

// ...

// イベントの購読
rxEventBus.subscribe('someKey', value => {
  console.log(value); // 'someValue' が出力される
});

以上で任意のイベント送信が実現できました。ソースコードは GitHub に置きました。よろしければ参照ください。
⇒ https://github.com/hkusu/rxjs-eventbus-sample

$ npm install で環境が再現できるはずです。利用できる npm スクリプトは package.json を参照ください。

ほか

用途的にはデータの変更通知などが考えられるでしょうか。

リークを防止する為、本当は Rx の Subject や Subscription はもし不要になったら停止した方がいいです。
⇒ RxJS/doc/gettingstarted/subjects.md