处理 NGRX 效果后的动作

Question

我有一个保存报告的 NGRX Effect，保存报告后我想重置表单并显示报告已保存的通知。

下面是商店调度效果以保存报告并将其注入商店的示例。

保存并插入后，我想重置表单并向用户显示通知。

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

一个效果应该return一个新动作。

你有效果进行 API 调用，然后如果它成功，你 return 一个将命中减速器以重置表单的动作，然后还调用一个影响来发送通知。

基本设置

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

处理 NGRX 效果后的动作

Handle Actions after NGRX Effect

javascript

ngrx

ngrx-effects