Gestion des actions après l'effet NGRX

Question

J'ai un effet NGRX qui enregistre un rapport, après l'enregistrement du rapport Je souhaite réinitialiser le formulaire et afficher une notification indiquant que le rapport a été enregistré. Vous trouverez ci-dessous un exemple de magasin qui envoie un effet pour enregistrer le rapport et l'injecter dans le magasin. Après avoir été enregistré et inséré, je veux réinitialiser le formulaire et afficher une notification à l'utilisateur.

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 }); 
} 

La question est que je veux seulement réinitialiser le formulaire et montrer la notification si le rapport a été sauvegardé par le serveur. Quel est le meilleur moyen d'accomplir cela.

Answer 1

Un effet est supposé renvoyer une nouvelle action.

Vous avez l'effet de faire l'appel de l'API, puis si elle réussit, vous renvoyez une action qui va frapper le réducteur pour réinitialiser le formulaire, puis également appeler un affect pour envoyer la notification.

Configuration de base

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 

Voici comment l'effet pourrait être écrit pour soumettre la forme

@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))) 
    );