[RxJS] exhaustMap vs switchMap vs concatMap

exhaustMap: It drop the outter observable, just return the inner observable, and it waits until previous observable complete before emit next observable.

Good for canceling extra network outter request, for example click (outter) request trigger network (inner) request, if network (inner) request is not finished yet, new click (outter) request will be ignored.

Use case: "Save" button, avoid send extra network request to the server.

 

switchMap: Map to inner observable, cancel previous request.

  // exhaustMap

  @Effect()
  login$ = this.actions$
    .ofType(Auth.LOGIN)
    .map((action: Auth.Login) => action.payload)
    .exhaustMap((auth: Authenticate) =>
      this.authService
        .loginUser(auth.email, auth.password))
    .map(user => new Auth.LoginSuccess({user}))
    .catch(error => of(new Auth.LoginFailure(error)));


// switchMap

  @Effect()
  login$ = this.actions$
    .ofType(Auth.LOGIN)
    .map((action: Auth.Login) => action.payload)
    .switchMap((auth: Authenticate) =>
      this.authService
        .loginUser(auth.email, auth.password)
        .map(user => new Auth.LoginSuccess({user}))
        .catch(error => of(new Auth.LoginFailure(error)));
     )
    .shareReplay(1)

SwitchMap has cancelling logic.

 

concatMap:

Good for waiting previous network request finished. For example, We have a form, when use is typing, we also want to save the data, send to the server. 

Every network request will send in order, and wait pervious network request finished.