问Redux表单或简单表单

EN

现在已经知道为什么要将表单数据保持在状态中，并且您可以推断，如果这对您的应用程序有意义，我们可以回到我们的主要主题。假设应用程序使用React和Redux，则有两个主要选项：

• 为每个字段实现一个事件处理程序，该处理程序分派操作创建者和将接收操作…的缩减程序所有的redux内容。
• ✔️，或者我们可以使用一个库来为我们完成所有这些工作。

Redux-Form是完成这项工作的一个很好的选择。It 跟踪所有常见的应用程序表单状态，例如：

• 表单中的字段；
• 每个字段的值；
• 焦点字段；如果字段值有效，则为
• ；
• 用户已与之交互的字段；
• 如果表单正在执行异步验证，则执行任何异步验证。

当时Redux-Form还没有成熟的替代方案，但现在我们有很好的选择，比如Formik和Final-Form，它们都使用React的组件状态。

在编写Redux应用程序时，我们应该将所有对应用程序重要的数据保留在应用程序状态中，只要它有意义。但重点是，考虑什么对您的应用程序更有意义，并选择您的选择。

灵感来自：Guilherme Gonçalves

当涉及到将表单集成到我们的React应用程序中时，它使工作变得更容易，而不是使用Redux手动将其组合在一起。

我们所有的数据都保存在Redux存储中，每当用户更改元素时，我们都会调用一个试图在Redux中更改该数据的操作创建器。

Redux Form试图自动化其中的一些流程。

因此，我们可能会有一些输入元素，它将由我们的应用程序赋值和onChange处理程序，因为我们从不让DOM保存有关我们应用程序的信息。

我们将使用一些reducer来保存应用程序中不同表单的所有状态。

我们所有的表单数据都将存在于Redux存储中，所有这些数据都由一个reducer来维护。

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

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

Redux Form基本上将为我们做我上面写的所有事情，因为我上面描述的过程是如此重复，Redux Form将为我们自动化这一过程。

Redux Form允许我们将其抽象出来。Redux表单将有一个reducer，我们将其连接到我们的应用程序。它包含在Redux表单库中。

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