Created effect in NgRX as below, and expecting behavior as:

1. code in map block should be executed only if http response is successful
2. code in catchError block should be executed only if response is unsuccessful However code in map block is executed immediately after request code is executed without waiting for response.

Effect code is as below

  @Effect()
  uploadRequestEffect$: Observable<any> = this.actions$.pipe(
    ofType(actions.ActionTypes.UPLOAD_REQUEST),
    map((action: actions.UploadRequestAction) => action.payload),
    switchMap(state => {
      return this.uploadApiClient.upload(state).pipe(
        map(() =>new actions.UploadCompletedAction()),
        catchError(error => of(new actions.UploadFailureAction(error)))
      )
    }));

Because of code in map execution , UploadCompleteAction is triggered and updating HTML component updating message "File upload completed". however request is yet to be send.

Catch error block triggers appropriately when error occurs but map block executed regardless. FYI. I've HttpRequest interceptor code, which adds token to headers before sending request. Can you please help me on this.