在React中使用Redux和vanilla受控形式组件的示例？

Question

我是Redux的新手，但不是React。而且我很难想象如何设计这个。

我的应用程序有一个复杂的嵌套数据结构 - 一个“记录”。单页表单允许用户编辑该记录的所有字段。编辑并不简单：我需要在用户提交表单时检查旧记录和任何新编辑之间的某些字段是否不同。如果存在差异，我需要执行一堆花哨的逻辑来正确更新记录。 （例如，用户对单个字段进行的编辑可能需要传播到记录的各个深层部分，需要重新生成并存储在记录中的派生数据列表等。）

我想：

• 使用Redux作为记录存储。 （我得到了这一部分。）
• 使用商店中的单个记录来保存我的表单组件。
• 使用vanilla React存储表单字段状态（即普通的受控表单元素）
• 在提交时，将旧记录（即来自商店）与新记录（我的组件的状态）进行比较，执行奇特的逻辑，然后使用记录更新商店。
• 除了Redux或Immutability Helper之外，我不想安装其他库。所以，没有Redux-Forms或其他业务。

建立这个的最佳方法是什么？我有基本架构。也就是说，我有一个Redux存储工作，可以进行简单的更新（比如将新数据推送到数组或替换整个记录）。但我不知道如何组织我的“花哨逻辑”和在哪里来做我需要的奇特逻辑。例如，这应该是逻辑：

• 在调度一个整洁的对象存储在Redux商店之前，由我的表单组件处理？
• 是否在外部实用程序库中，并由动作创建者调用？
• ...在外部实用程序库中，并在reducer中调用？
• ...直接在动作创建者或减速器中处理，所有数十行逻辑？

提前感谢指向将简单的香草React表格与Redux混合的示例，以及如何构建此函数的提示。

Answer 1

我的"Practical Redux" tutorial series有三个帖子，涵盖了这种行为：

• Practical Redux, Part 6: Connected Lists, Forms, and Performance
• Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers
• Practical Redux, Part 8: Form Draft Data Management

我演示的方法是将正在编辑的项目复制到＆＃34;草稿数据＆＃34; Redux商店的部分，所有表单更改更新都适用于该草稿版本，然后具有reducer逻辑，以便在用户保存更新的表单时使用更改覆盖原始版本。如果需要，您当然可以对其进行修改，包括将草稿数据保持在组件状态。

一般来说，我个人会尝试将大部分实际逻辑移到组件之外，因为大部分逻辑应该独立于组件本身。杰克富兰克林最近有一篇关于extracting logic from React components的文章，这是这种心态的一个很好的例子。

另请注意，您可能需要考虑using selector functions to derive data，而不是明确地将其全部放在商店中。