验证Redux Store中的数据

Question

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

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

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

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

Answer 1

您可以将所有字段存储在减速器中，其形状如下：

"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 形式解决，我建议您使用它。