我正在使用 Redux。我应该在 Redux 存储中管理受控输入状态还是在组件级别使用 setState?

IT技术 reactjs redux redux-form
2021-05-19 07:40:42

我一直试图找出管理我的react表单的最佳方法。我尝试使用 onChange 来触发操作并使用我的表单数据更新我的 redux 存储。我也尝试过创建本地状态,当我的表单被提交时,我会触发和操作并更新 redux 存储。

我应该如何管理我的受控输入状态?

4个回答

我喜欢 Redux 合著者之一的这个答案:https : //github.com/reactjs/redux/issues/1287

将 React 用于对全局应用程序无关紧要且不会以复杂方式变异的临时状态。例如,某个 UI 元素中的切换、表单输入状态。将 Redux 用于全局重要或以复杂方式变异的状态。例如,缓存的用户或帖子草稿。

有时你会想要从 Redux 状态移动到 React 状态(当在 Redux 中存储一些东西变得尴尬时)或者相反(当更多组件需要访问一些曾经是本地的状态时)。

经验法则是:做任何不那么尴尬的事情。

也就是说,如果您确定您的表单不会影响全局状态或在卸载组件后需要保留,那么请保持在 react 状态。

  1. 您可以使用组件自己的状态。然后将该状态作为动作的参数。这几乎就是React Docs 中描述的“React 方式”

  2. 您还可以查看Redux Form它基本上完成了您所描述的工作,并将表单输入与 Redux State 联系起来。

第一种方式基本上意味着您正在手动完成所有操作 - 最大程度的控制和最大程度的样板。第二种方式意味着您让高阶组件为您完成所有工作。然后就是介于两者之间的一切。我看到有多个包可以简化表单管理的特定方面:

  1. React Forms - 它提供了一堆辅助组件,使表单渲染和验证更加简单。

  2. React JSON 模式- 允许从 JSON 模式构建 HTML 表单。

  3. Formsy React - 正如描述所说:“React JS 的这个扩展旨在成为灵活性和可重用性之间的‘甜蜜点’。”

更新:似乎这些天 Redux Form 被替换为:

  1. react最终形式

该领域另一个值得一试的重要竞争者是:

  1. 福米克

在我的上一个项目中尝试了 React Hook Form - 非常简单,占用空间小,并且可以正常工作:

  1. react钩形式

TL; 博士

可以使用任何看起来适合您的应用程序的内容(来源:Redux docs


确定应该将哪种数据放入 Redux 的一些常见经验法则:

  • 应用程序的其他部分是否关心这些数据?
  • 您是否需要能够基于这些原始数据创建进一步的派生数据?
  • 是否使用相同的数据来驱动多个组件?
  • 能够将这种状态恢复到给定的时间点(即时间旅行调试)对您来说是否有value?
  • 您是否要缓存数据(即,如果它已经存在,则使用它的状态而不是重新请求它)?

这些问题可以轻松帮助您确定更适合您的应用程序的方法。以下是我在应用程序中使用的视图和方法(用于表单):

本地状态

  • 当我的表单与 UI 的其他组件没有关系时很有用。只需从input(s)中捕获数据并提交。我大部分时间使用它来处理简单的表单。
  • 我在时间旅行调试表单输入流方面没有看到太多用例(除非其他一些 UI 组件依赖于此)。

Redux 状态

  • 当表单必须更新我的应用程序中的其他一些 UI 组件时很有用(很像双向绑定)。
  • 当我的表单input导致其他一些组件render取决于用户输入的内容时,我会使用它

就我个人而言,我强烈建议将所有内容保持在 Redux 状态并远离本地组件状态。这本质上是因为如果您开始将 ui 视为状态的函数,您可以进行完整的无浏览器测试,并且您可以利用保留完整状态历史的参考(例如,输入中的内容,打开的对话框等) ,当一个错误发生时 - 不是他们从一开始的状态是什么)供用户调试。来自clojure领域的相关推文

编辑补充:这是我们和我们的姊妹公司在我们的生产应用程序以及我们如何处理 redux/state/ui 方面的进展