使用 NGRX / @Effects 处理表单状态答案

【问题标题】：Handling form state with NGRX / @Effects使用 NGRX / @Effects 处理表单状态
【发布时间】：2017-03-16 10:35:09
【问题描述】：

我有一个表单，在提交时我调度了一个被效果捕获的动作。然后效果会进行 http 调用。我想知道在此操作完成/失败后我将如何执行以下操作：

操作完成后显示成功消息
重置所有字段以供下次使用表单时使用
在操作失败后显示错误

我知道我可以重新调度一个动作来用几个标志success、error 等填充商店。但是，重置表单可能会通过调用一个函数来完成。订阅商店并在孩子中调用相关的reset 函数是否可以接受？就好像我希望组件能够像效果一样聆听动作。

【问题讨论】：

标签： javascript angular ngrx ngrx-effects

【解决方案1】：

如果您的 effect-rest 不影响商店，而只应显示通知 - 那么我会说两种方法：

1) 按照您自己的建议在组件中注入 Actions：

class SomeComponent {
    constructor(actions: Actions) {
        actions.ofType(SOME_EVENT)
            .do(myThing)
            .takeUntil(componentIsDestroyed)
            .subscribe();
    }
}

2) 或者根本不采用效果和操作方式，只需调用一个简单的服务方法：

class SomeComponent {
    constructor(myService: CoolService) {
    }

    onClick(): void {
        mySevice.makeRequest()
            .do(myThing)
            .subscribe();
    }
}

【讨论】：