Handle Actions after NGRX Effect

Question

I have a NGRX Effect that saves a report, after the report is saved I want to reset the form and display a notification that the report was saved.

Below is an example of the store dispatching a effect to save the report and inject it into the store.

After it was saved and inserted, I want to reset the form and display a notification to the user.

onSubmit(): void {
  // Gather the fields from the form and
  // dispatch the new report event which will
  // save the report and insert it into the store
  const formModel = this.reportForm.value;
  this.store.dispatch(new AddReport(formModel));

  // After the report is saved, reset the form and
  // display a notification to the user it was saved
  this.reportForm.markAsPristine();
  this.snackbar.open('Report Saved!', null, { duration: 700 });
}

The issue is I want to only reset the form and show the notification if the report was saved by the backend. Whats the best way to accomplish this.

score 2 · Accepted Answer · answered Sep 27 '17 at 13:44

An effect is supposed to return a new action.

You have the effect make the API call and then if it is successful, you return an action that will hit the reducer to reset the form and then also call an affect to send the notification.

Basic Setup

reducers:
   successfullSubmit:
     const state = state.form = resetedform
     return state

effects
   formSubmit
     api.submitform
       on success return successfullSubmit
     catch
       on fail return submitFail
   successFullSubmit
     display notification

This is how the effect might be written for form submit

  @Effect()
  formSubmit$: Observable<Action> = this.actions$
    .ofType(actions.formSubmit)
    .map(toPayload)
    .switchMap(formStuffs =>
      this.api.submitForm(formStuffs)
        .map(() => new FormSubmitSuccess())
        .catch(error => of(new FormSubmitError(error))) 
    );

How would u translate that FormSubmitSuccess to the component action? — amcdnl, Oct 17 '17 at 15:20
does the answer here answer you question? https://stackoverflow.com/questions/43226681/how-to-subscribe-to-action-success-callback-using-ngrx-and-effects/43227548 — Meeker, Oct 17 '17 at 19:30

Handle Actions after NGRX Effect

1 Answers1