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

Question

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

操作完成后显示成功消息
为下一次使用表单时重置所有准备就绪的字段
显示操作失败后的错误

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

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

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

Handling form state with NGRX / @Effects

javascript

ngrx

ngrx-effects

angular