「テキスト入力 -> 自動で検索開始」を実現するためのRx使い方

• example-app/book.ts at ee0f331bf808525e003efa264b5065964c7f942b · ngrx/example-app · GitHub
  • 元ネタ（NgRx4のサンプルアプリより）

シュミレート用サンプルコード

テキスト入力の代わりに、画面クリックで一連の流れが確認できる簡易版コードです。 ブラウザのコンソールで実行させれば、動作確認できます。

（http://reactivex.io/rxjs/などで実行してみてください。）

const sub = new Rx.BehaviorSubject();
const http = () => Rx.Observable.of('{ data }').delay(500);

document.addEventListener('click', (e) => {
  sub.next(e);
});

sub.debounceTime(1000)
  .distinctUntilChanged()
  .switchMap(() => {
    console.log('start http');
    const next$ = sub.skip(1);
    return http().takeUntil(next$);
  })
  .subscribe(val => console.log('get', val));

説明

• .debounceTime
  • 入力中に送信されないようにする
• .distinctUntilChanged
  • 前回と同じ値を送信しないようにする
• .switchMap
  • 未完了のhttp通信があった場合、無視する
• .takeUntil(next$)
  • debounceTimeで遅延させている間にhttp通信が完了する場合があるので、何かしらの入力変更があったらhttp通信を無視できるようにする