React Redux

Question

我想知道在实体列表的情况下，在React Redux中实施CRUD操作的最佳方法是什么。

要求：
1.每行包含一个实体
2.更改文本输入中的值会触发PUT调用BE 3.每行都有删除操作触发对BE的DELETE调用 4.表单有一个ADD动作触发对BE的POST调用

注意：
1.没有单一的提交按钮

我为此考虑了Redux Form，但由于我没有单一的提交操作，我发现它不太适合（随意纠正我）

Answer 1

您可以使用Redux表格。如果为表单设置验证器，则可以定义字段是否依赖于另一个字段。 Redux Form将为任何字段中的每个更改运行此验证器。

如果表单中没有验证错误，您可以设置Redux Observable或Redux Thunk之类的内容，以便在Redux表格的CHANGE操作中提交表单。

这样，只有当所有相关字段也被填充时，您才会在更改时提交表单。

Answer 2

我是Redux的新手。我就是这样做的。我将在reducer中保持一个名为“personList”的状态。我将所有组件放在一个容器中，并将personList映射到名为“propPersonList”的容器属性。当我创建ListItemComponent时，我还会将列表中人员的索引作为属性“propIndex”传递给组件。两个输入的onChange处理程序将使用payload {index：this.props.propIndex，value：event.target.value}调度一个动作，然后触发PUT请求后端（使用lodash模块来限制它而不是每次都触发它输入变化）。 reducer将根据有效负载处理操作并更新状态。添加按钮将调度另一个操作，reducer将简单地向该状态添加一个空实体，然后触发对后端的请求。 remove按钮将调度一个以索引作为有效负载的动作，reducer将从列表中删除相应的实体。