对 NGXS Forms UpdateFormValue 执行副作用

Question

我的应用程序使用 NGXS 表单插件，我想在表单中的值发生变化时触发某些 API 调用。

执行以下操作是否正确？如果没有，推荐的方法是什么？

@Action(UpdateFormValue)
public doStuff(ctx: StateContext<any>, { payload }: UpdateFormValue) {
    // logic
}

这似乎可行，但我无法在 Redux 开发人员工具中看到更新表单值操作，这让我想知道我是否做对了。

Answer 1

是的，你走对了！

NGXS 在 valueChanges 流发出任何事件后在幕后调度 UpdateFormValue，基本上，没有什么超自然的 :D

我唯一的意见是，当新的 UpdateFormValue 动作被调度时，您可能想要取消之前未完成的异步作业，因此您必须使用 cancelUncompleted 选项：

@Action(UpdateFormValue, { cancelUncompleted: true })
public doStuff(ctx, action) {}

此外，UpdateFormValue 操作不会立即调度，因为 valueChanges 流是通过 debounceTime 传输的。如果您不希望此流通过 debounceTime 进行管道传输，您必须提供 ngxsFormDebounce 绑定，该绑定应小于 0，例如：

<form ngxsForm="blah-blah" [ngxsFormDebounce]="-1">

或者您可以将 FormGroup 的 updateOn 选项显式设置为 blur 或 submit，那么 debounceTime 也将被忽略。

Performing side effects on NGXS Forms UpdateFormValue