Redux表单或简单表单

Question

经常在面试问题中听到，为什么人们应该在ReactJs中使用redux形式而不是简单形式。它为开发商提供了哪些额外的普通设施？那么对此应该是正确的答案。

Answer 1

现在知道了为什么要将表单数据保持在该状态，并且您认为如果这对您的应用程序有意义，那么我们可以回到我们的主要主题。鉴于应用程序使用React和Redux，有两个主要选项：

• 为每个字段实现一个事件处理程序，该事件处理程序调度一个动作创建者，以及将接收该动作的reducer…所有的redux东西。
• ✔️或者我们可以使用可以为我们完成所有这些工作的库。

Redux-Form是为您完成这项工作的绝佳选择。它保留所有常见申请表格状态的跟踪，例如：

• 表单中的字段；
• 每个字段的值；
• 重点领域；
• 如果字段值有效；
• 用户与之互动的字段；
• 如果正在提交表单；
• 如果正在进行任何异步验证。

当时Redux-Form还没有确定的替代方案，但是如今，我们有不错的选择，例如Formik和Final-Form，它们都使用React的组件状态。

编写Redux应用程序时，只要有意义，我们应该将对应用程序重要的所有数据保持在应用程序状态。但关键是要找出对您的应用更有意义并选择您的选择的原因。

灵感来自：Guilherme Gonçalves

Answer 2

与将表单全部集成到Redux中相比，将表单集成到我们的React应用程序中使工作变得更加轻松。

我们所有的数据都保存在Redux存储区中，只要用户更改元素，我们就会调用一个动作创建者，尝试在Redux内部更改该数据。

Redux Form尝试使某些过程自动化。

所以我们可能会有一些输入元素将由应用程序分配一个值和onChange处理程序，因为我们从不让DOM保留有关我们应用程序的信息。

我们将有一些简化程序，可以在我们的应用程序中保存所有不同形式的状态。

我们所有的表单数据都将存在于Redux存储中，并且所有这些数据都由化简器维护。

为了确保我们可以从商店中获取数据到输入元素，我们将使用mapStateToProps来获取表单数据并将其通过props传递给我们的组件。然后，确保我们将props对象作为参数传递给我们的不同输入元素。

每当用户对元素进行更改时，我们都有一个回调处理程序，该处理程序将调用操作创建者并尝试更新Redux存储内的表单数据。

Redux Form本质上将为我完成上面为我们编写的所有操作，因为我上面刚刚描述的过程是如此重复，因此Redux Form将为我们自动化。

Redux Form允许我们对其进行抽象处理。 Redux Form将具有一个简化器，我们可以将其连接到我们的应用程序。它包含在Redux表单库中。

我们不会编写任何mapStateToProps函数。我们将不必编写动作创建者。我们要做的就是确保将一些表单信息输入到input元素中，并确保input元素理解只要需要更改，它就需要调用Redux form提供的回调处理程序。所有这些都由Redux Form自动在幕后进行。