Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwitchMap vs MergeMap in the #ngrx example

Tags:

rxjs

ngrx

Below is code from the Ngrx example: https://github.com/ngrx/example-app/blob/master/src/effects/book.ts My question is why in the first @Effect, it uses switchMap while the others use mergeMap. Is that because the first @Effect is dealing with network, and with the switchMap you can cancel the previous network request if it's running?

@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)       ))     ); } 
like image 260
Tuong Le Avatar asked Jul 21 '16 06:07

Tuong Le


People also ask

What is the difference between mergeMap and concatMap?

concatMap : behaves like a queue: It stores all calls and sends one after another. If one is completed, the next one is being processed. mergeMap : Also sends all requests, like concatMap but does not wait until the response is coming back. It sends them out as they come.

When would you use a switchMap?

switchMap could be used — when a new search is made, pending results are no longer needed; and. exhaustMap should not be used — searches for new, partial addresses should not be ignored.

Where is mergeMap used?

The mergeMap() operator is also called flatMap. This operator is best to use when you want to flatten an inner observable and manually control the number of inner subscriptions.

What is a mergeMap?

mergeMap operator is basically a combination of two operators - merge and map. The map part lets you map a value from a source observable to an observable stream. Those streams are often referred to as inner streams.


2 Answers

You are correct; switchMap will unsubscribe from the Observable returned by its project argument as soon as it has invoked the project function again to produce a new Observable.

RxJs is incredibly powerful and dense, but its high level of abstraction can sometimes make code hard to understand. Let me debunk the marble diagrams and docs given by @Andy Hole a little and bring them up to date. You may find the marble syntax reference highly valuable to better understand rxjs operators from their tests (at least I found this missing/not highlighted enough in the official docs).

mergeMap

mergeMap

The first line in the diagram is the source Observable which emits (1,3,5) at different times. The second line in the diagram is the prototypical Observable returned by the project function i => ... passed to the .mergeMap() operator.

When the source Observable emits the item 1, mergeMap() invokes the project function with i=1. The returned Observable will emit 10 three times, every 10 frames (see marble syntax reference). The same happens when the source Observable emits item 3 and the project function creates an Observable that emits 30 three times. Note that the result of mergeMap() contains all three elements generated by each Observable returned from project.

switchMap

switchMap This is different with switchMap(), which will unsubscribe from the Observable returned by project as soon as it has invoked it again on a new element. The marble diagram indicates this with the missing third 30 item in the output Observable.

In the example you have given, this leads to the cancellation of the pending search request. This is a very nice but hard-to-get-right property, which you get for free by combining switchMap() with cancellable Observables returned by Angular's Http service. This can save you a lot of headaches without worrying about properly handling all the race conditions that typically occur with async cancellation.

like image 181
Johannes Rudolph Avatar answered Sep 27 '22 20:09

Johannes Rudolph


You are right.

As you can see, switchMap is used with search functionality. The searchbox in this example is programmed to basically emit a search request when the user enters text in the textbox (with a 350ms debounce or delay).

This means that when the user enters 'har', ngrx sends a search request to the service. When the user enters another letter 'r', the previous request is canceled (since we are not interested in 'har' anymore, but 'harr').

It is very nicely shown in the marble diagrams provided in another answer. In mergeMap, the previous Observables are not canceled and therefore '30' and '50' are mixed together. Using switchMap, only the 5s are emitted, because the 3's are canceled.

like image 37
Alexander Ciesielski Avatar answered Sep 27 '22 21:09

Alexander Ciesielski