Redux表单或简单表单

时间:2018-10-24 04:44:48

标签: javascript reactjs redux redux-form

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

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

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

灵感来自:Guilherme Gonçalves

答案 1 :(得分:1)

与将表单全部集成到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自动在幕后进行。