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

Question

我一直试图找出管理我的反应形式的最佳方法.我试图使用onChange触发一个动作并用我的表单数据更新我的redux商店.我也试过创建本地状态,当我的表单被提交时,我触发并动作并更新redux存储.

我该如何管理受控输入状态？

Answer 1

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

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

有时你会想要从Redux状态转移到React状态(当在Redux中存储某些东西变得笨拙时)或者反过来(当更多组件需要访问某些曾经是本地的状态时).

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

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

Answer 2

1. 您可以使用组件自己的状态.然后采取该状态并将其作为行动的论据.这几乎就是React Docs中描述的"React方式" .

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

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

3. React Forms - 它提供了一堆帮助程序组件,使表单呈现和验证更加简单.

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

5. Formsy React - 正如描述所说:"React JS的这一扩展旨在成为灵活性和可重用性之间的"最佳点".

更新:似乎现在Redux Form被替换为:

6. 反应最终表格

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

7. Formik

Answer 3

TL; DR

可以使用适合您应用的任何内容(来源:Redux docs)

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

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

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

当地的州

• 当我的表单与UI的其他组件无关时很有用.只需从input(s)和提交中捕获数据.我大部分时间都用这个简单的形式.
• 我没有在时间旅行中看到很多用例调试表单的输入流(除非其他一些UI组件依赖于此).

Redux州

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

Answer 4

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

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