I need to call an API that can return errors, warnings or success.

If it returns warnings the user must able to accept the warning and I should send the same payload acceptWarning: true.

I need to display an ionic modal and wait for the user's response to see if he accepts or cancel the warning.

What should be the best way to achieve that?

Right now I have something like this:

  @Effect()
  public Assign$ = this.actions$.pipe(
    ofType(myActions.Assign),
    map(action => action.payload),
    exhaustMap(assignment =>
      this.assignService.assign(assignment).pipe(
        switchMap(() => {
          this.errorService.showPositiveToast(' Assigned Successfully');
          return [
            new LoadAssignments(),
            new LoadOtherData()
          ];
        }),
        catchError(error =>
          from(this.openErrorModal(error)).pipe(
            switchMap(({ data = '' }) => {
              if (data === 'Accept') {
                return of(new Assign({ ...assignment, acceptWarning: true }));
              }

              return of(new AssignShipmentFailure());
            })
          )
        )
      )
    )
  );


async openErrorModal(response: any) {
    const errorModal = await this.modalCtrl.create({
      component: ErrorValidationPopup,
      componentProps: {
        response: response,
      },
    });
    await errorModal.present();
    return errorModal.onDidDismiss();
  }

But it is not triggering the Assign action again. Thanks for your help

CodePudding user response：

If any error occurred in the effect's observable (or any Observable), then its stream emitted no value and it immediately errored out. After the error, no completion occurred, and the Effect will stop working.

To keep the Effect working if any error occurred, you have to swichMap instead of exhaustMap, and handle the errors within the inner observable of the switchMap, so the main Observable won't be affected by that.

Why use switchMap?

The main difference between switchMap and other flattening operators is the cancelling effect. On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed. You can remember this by the phrase switch to a new observable

You can try something like the following:

@Effect()
public Assign$ = this.actions$.pipe(
  ofType(myActions.Assign),
  map(action => action.payload),
  switchMap(assignment =>
    this.assignService.assign(assignment).pipe(
      switchMap(() => {
        this.errorService.showPositiveToast('Assigned Successfully');
        return [
          new LoadAssignments(),
          new LoadOtherData()
        ];
      }),
      catchError(error =>
        from(this.openErrorModal(error)).pipe(
          map(({ data = '' }) => {
            if (data === 'Accept') {
              return new Assign({ ...assignment, acceptWarning: true });
            }

            return new AssignShipmentFailure();
          })
        )
      )
    )
  )
);