【问题标题】:Redux form or simple formRedux 形式或简单形式
【发布时间】:2018-10-24 04:44:48
【问题描述】:

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

【问题讨论】:

  • 这一切都归结为库使用的性能和最佳实践。 Redux-form 就是为了这个目标而设计的。如果您不想重新发明轮子,请采用。

标签: javascript reactjs redux redux-form


【解决方案1】:

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

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

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

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

当时 Redux-Form 没有成熟的替代方案,但现在我们有很好的选择,例如 FormikFinal-Form,它们都使用 React 的组件状态。

在编写 Redux 应用程序时,我们应该将所有对应用程序重要的数据保持在应用程序状态,只要它有意义。但重点是,说明什么对您的应用程序更有意义,然后选择您的选择。

灵感来自:Guilherme Gonçalves

【讨论】:

    【解决方案2】:

    将表单集成到我们的 React 应用程序中,而不是使用 Redux 手动将它们整合在一起,这让生活变得更轻松。

    我们所有的数据都保存在 Redux 存储中,每当用户更改元素时,我们都会调用一个动作创建者来尝试在 Redux 中更改该数据。

    Redux Form 尝试自动化其中的一些过程。

    因此,我们的应用程序可能会为某些输入元素分配一个值和 onChange 处理程序,因为我们从不让 DOM 保存有关我们应用程序的信息。

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

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

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

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

    Redux Form 基本上会为我们完成我上面写的所有事情,因为我刚才描述的过程非常重复,Redux Form 会为我们自动完成。

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-12-13
      • 1970-01-01
      • 2013-02-04
      相关资源
      最近更新 更多