web-dev-qa-db-ja.com

#ngrxの例のSwitchMapとMergeMap

以下は、Ngrxのサンプルのコードです。 https://github.com/ngrx/example-app/blob/master/src/effects/book.ts 私の質問は、最初の@Effectで、それはswitchMapを使用し、その他はmergeMapを使用します。これは、最初の@Effectがネットワークを処理しており、switchMapを使用しているので、実行中の場合、以前のネットワーク要求をキャンセルできますか？

@Effect() search$ = this.updates$
    .whenAction(BookActions.SEARCH)
    .map<string>(toPayload)
    .filter(query => query !== '')
    .switchMap(query => this.googleBooks.searchBooks(query)
      .map(books => this.bookActions.searchComplete(books))
      .catch(() => Observable.of(this.bookActions.searchComplete([])))
    );


  @Effect() clearSearch$ = this.updates$
    .whenAction(BookActions.SEARCH)
    .map<string>(toPayload)
    .filter(query => query === '')
    .mapTo(this.bookActions.searchComplete([]));


  @Effect() addBookToCollection$ = this.updates$
    .whenAction(BookActions.ADD_TO_COLLECTION)
    .map<Book>(toPayload)
    .mergeMap(book => this.db.insert('books', [ book ])
      .mapTo(this.bookActions.addToCollectionSuccess(book))
      .catch(() => Observable.of(
        this.bookActions.addToCollectionFail(book)
      ))
    );


  @Effect() removeBookFromCollection$ = this.updates$
    .whenAction(BookActions.REMOVE_FROM_COLLECTION)
    .map<Book>(toPayload)
    .mergeMap(book => this.db.executeWrite('books', 'delete', [ book.id ])
      .mapTo(this.bookActions.removeFromCollectionSuccess(book))
      .catch(() => Observable.of(
        this.bookActions.removeFromCollectionFail(book)
      ))
    );
}
rxjsngrx
52
Tuong Le

すでに回答済みで、非常に詳細ですが、これを見てください。switchmapが何であるか決して忘れません。

https://www.youtube.com/watch?v=rUZ9CjcaCEw

7
Suresh Nagar

あなたが正しいです。

ご覧のとおり、switchMapは検索機能とともに使用されます。この例の検索ボックスは、ユーザーがテキストボックスにテキストを入力すると（350ミリ秒のデバウンスまたは遅延で）基本的に検索要求を送信するようにプログラムされています。

つまり、ユーザーが「har」と入力すると、ngrxは検索要求をサービスに送信します。ユーザーが別の文字「r」を入力すると、以前のリクエストはキャンセルされます（「har」にはもう興味がないので、「harr」に興味があるため）。

別の回答で提供されている大理石図に非常にうまく示されています。 mergeMapでは、以前のObservableはキャンセルされないため、「30」と「50」が混在します。 switchMapを使用すると、3がキャンセルされるため、5のみが放出されます。

7
Alexander Ciesielski

mergeMap

出力のObservableにマージされるObservableに各ソース値を投影します。

各値をObservableにマップし、mergeAllを使用してこれらの内部Observableをすべてフラット化します。

enter image description here

switchMap

各ソース値をObservableに投影します。Observableは出力Observableにマージされ、最後に投影されたObservableからのみ値を出力します。

各値をObservableにマップし、スイッチを使用してこれらの内部Observableをすべてフラット化します。

enter image description here

ソース： RxJSのES6 Observables

4
Andy Hoyle