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

4 回答

• 23

  • 您可以使用组件's own state. And then take that state and give it as an argument to the action. That'几乎"React way"，如React Docs中所述 .

  • 您还可以查看Redux Form . 它基本上完成了您所描述的内容，并将表单输入与Redux State链接 .

  第一种方式基本上意味着您手动完成所有操作 - 最大控制和最大样板 . 第二种方式意味着您让更高阶的组件为您完成所有工作 . 然后介于两者之间 . 我见过多个包简化了表单管理的特定方面：

  • React Forms - 它提供了一堆辅助组件，使表单呈现和验证更加简单 .

  • React JSON schema - 允许用户从JSON模式构建HTML表单 .

  • Formsy React - 如描述所示："This extension to React JS aims to be that " sweet spot " between flexibility and reusability."

  Update: 似乎现在Redux Form被替换为：

  • React Final Form

  在这个值得一试的空间中，另一个更重要的竞争者是：

  • Formik

  回复于 2024-05-02T15:46:53+08:00
• 35

  我喜欢Redux的一位合着者的回答：https://github.com/reactjs/redux/issues/1287

  将React用于与全局应用无关的短暂状态，并且不会以复杂的方式进行变异 . 例如，某个UI元素中的切换，表单输入状态 . 将Redux用于全局重要或以复杂方式变异的状态 . 例如，缓存用户或帖子草稿 . 有时你会想要从Redux状态转移到React状态（当在Redux中存储东西变得笨拙时）或者反过来（当更多组件需要访问某些曾经是本地的状态时） . 经验法则是：做任何不那么尴尬的事情 .

  也就是说，如果您确定您的表单不会影响全局状态或者在卸载组件后需要保留，那么请保持处于反应状态 .

  回复于 2024-05-02T15:46:53+08:00
• 5

  TL;DR

  可以使用适合您应用的任何内容（来源：Redux docs）

  ---

  确定应该将哪种数据放入Redux的一些常用经验法则：应用程序的其他部分是否关心这些数据？您是否需要能够根据此原始数据创建更多派生数据？是否使用相同的数据来驱动多个组件？能够将此状态恢复到给定时间点（即时间旅行调试）是否对您有 Value ？你想缓存数据（即，如果它已经存在而不是重新请求它，那么使用处于状态的状态）？

  这些问题可以轻松帮助您确定更适合您的应用的方法 . 以下是我在我的应用程序（表单）中使用的观点和方法：

  本地州

  • 当我的表单与UI的其他组件无关时很有用 . 只需从 input （s）捕获数据并提交 . 我大部分时间都用这个简单的形式 .

  • 我没有看到很多用例在时间旅行中调试我的表单的输入流（除非其他一些UI组件依赖于此） .

  Redux状态

  • 当表单必须更新我的应用程序中的其他UI组件时非常有用（很像two-way binding） .

  • 当我的表单 input （s）导致某些其他组件 render 时，我会使用它，具体取决于用户输入的内容 .

  回复于 2024-05-02T15:46:53+08:00
• 4

  就个人而言，我强烈建议将所有内容保持在Redux状态并远离本地组件状态 . 这主要是因为如果你开始将ui视为状态的函数，你可以完成无浏览器测试，你可以利用保持完整状态历史的参考（例如，输入中的内容，打开的对话框等等） ，当一个错误命中 - 不是从一开始就是什么状态）用户进行调试 . Related tweet from the realm of clojure

  编辑添加：这是我们和我们的姐妹公司在我们的 生产环境 应用程序和我们如何处理redux / state / ui方面的转变

  回复于 2024-05-02T15:46:53+08:00