验证Redux Store

Question

我正在尝试在redux商店中验证表单的数据。什么是最好的方法来解决这个问题。到目前为止，我有一些想法：

1. 验证操作必须绑定到某种类型的侦听器，如onBlur或onChange。一旦表单组件模糊，它就会被验证。但是，验证函数可以1）仅隔离验证该字段或2）必须传递完整的表单状态。此外，动作创建者不能/不应该访问新状态，因此我只能更新现有数据，并且我无法将验证器绑定到更新状态的内容。一个好处是，我可以通过调用验证器动作创建器并返回一个promise（使用redux-promise / thunk）来执行异步验证。

2. Reducer验证自己的数据。 reduce的第1部分将更新数据，第2部分将分析状态并更新错误。然而，这与减速器纯度相反，因为更新状态的一部分然后更新另一部分状态。因此，我必须确保在状态更新后运行验证程序。

3. 使用选择器从状态中导出错误。如果显示无效/有效，只显示错误，则数据本身不会更改。但是，由于选择器是同步的，我不能进行任何异步验证。

Answer 1

您可以将所有字段存储在reducer中，形状如下：

"fields": {
    "first_field": {
        "error": null, //stores error that should be shown in form
        "touched": false, //becomes true when onBlur event fired for this field,
        "value": "", //input value
    },
    ...
}

在这种情况下，您可以对整个表单运行验证并验证具有touched: true的所有字段。实际上，您描述的所有问题都在redux-form中解决了，我建议您使用它。