React Redux 中实体列表的 CRUD 操作答案

【问题标题】：CRUD Operations for list of entities in React ReduxReact Redux 中实体列表的 CRUD 操作
【发布时间】：2017-08-25 05:40:25
【问题描述】：

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

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

注意事项：
1. 没有一个提交按钮

我为此考虑过Redux Form，但由于我没有单一的提交操作，我觉得它不太合适（请随时纠正我）

【问题讨论】：

您可以选择在输入字段的模糊事件中保存表单，但当您只有一个输入字段时，这是一个不错的选择。但是在这里您有两个输入字段，因此您肯定应该有一个提交按钮。或者，如果您仍然想不提交，那么您必须先保存表单，然后再发送已保存项目的更新请求。

标签： reactjs redux redux-form

【解决方案1】：

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

当表单中没有验证错误时，您可以设置类似 Redux Observable 或 Redux Thunk 来通过 Redux Form 的 CHANGE 操作提交表单。

这样，您将提交更改表单，前提是所有相关字段也都填写完毕。

【讨论】：

感谢您的回答，我不想提交所有更改的实体，只提交相关实体，例如只提交已删除的实体。假设此列表是我的用户列表 - 当特定用户发生更改时，我不想更新我的所有用户。
您不必提交所有内容。每个CHANGE 操作都有已更改的字段，您只会提交此字段以及任何其他相关字段。
谢谢@squgeim，我开始明白了 - 所以你实际上是说 - 不要使用表单的提交，只使用操作？
是的。这样您就可以根据需要自定义请求。

【解决方案2】：

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

【讨论】：

感谢您的回答 - 您会在建议中使用 Redux 形式吗？如果是这样，您如何处理有关不同 CRUD 场景的提交？
我不认为 Redux 形式是必要的。基本上，所有请求都是通过异步调用完成的，当您收到请求的响应时（如果需要），您会分派一个操作来更新状态。