CODEWITHSUNDEEP
angularxmlhttprequestrxjsngrx-effects
Diego Vega
Diego Vega

Reputation: 223

switchMap cancel options http request in ngrx effect

I have a ngrx effect like this one:

@Effect()
  throwError$: Observable<Action> = this.actions$.pipe(
    ofType<notificationActions.ErrorThrow>(
      notificationActions.ActionTypes.ThrowError
    ),
    tap(() => {
      this.store.dispatch(new masterActions.LoadingHide());
      this.sub = this.devTools.liftedState.subscribe(data => {
        this.errorLogService.addErrorLog(JSON.stringify(data)).subscribe(data2 => console.log('data2', data));
        console.log(JSON.stringify(data));
      });
    }),
    map(action => action.payload),
    tap(() => {
      this.sub.unsubscribe();
    }),
    mergeMap(error => {
      return of(
        new notificationActions.ErrorAdd({
          type: error.type,
          description: error.description
        })
      );
    })
  );

the addErrorLog method of the errorLogService sends a http post request for storing the error log into a database. Everything is working doing the request like this, first an options request and then the post request, but if I switch to a switchMap to combine both observables the options request gets cancelled when I inspect it on the network tab on chrome dev tools.

This is the part of the code refactorized 

tap(() => {
      this.store.dispatch(new masterActions.LoadingHide());
      this.sub = this.devTools.liftedState
        .pipe(
          switchMap(data => {
            console.log('data', data);
            return this.errorLogService.addErrorLog(JSON.stringify(data));
          })
        )
        .subscribe();
    })

any clues?

Upvotes: 4

Views: 3289

Answers (1)

Martyn Verhaegen
Martyn Verhaegen

Reputation: 141

I ran into the same problem. Replacing switchMap with mergeMap did it for me, now each HTTP request waits to complete.

Upvotes: 6

Related Questions