NGRXエフェクト後のハンドルアクション

Question

レポートを保存するNGRXエフェクトがあります。レポートを保存した後、フォームをリセットしてレポートが保存されたという通知を表示します。

以下は、レポートを保存して店舗に注入するエフェクトをディスパッチするストアの例です。

保存して挿入した後、フォームをリセットしてユーザーに通知する必要があります。

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

問題は、私が唯一のフォームをリセットして、レポートをバックエンドによって保存された場合に通知を表示したいです。これを達成するための最良の方法は何ですか？

Answer 1

効果は新しいアクションを返すものとします。

API呼び出しを行い、正常に終了した場合は、フォームをリセットし、通知を送信するためにエフェクトを呼び出すためにレデューサーにヒットするアクションを返します。

基本設定

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 

これは、フォームが

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