小编典典

如何在Redux / React-Redux-UI中处理UI状态?

reactjs

我正在研究什么是存储UI状态的最佳方法,是否应该使用Redux-UI(https://github.com/tonyhb/redux-
ui)之类的东西来存储/管理UI状态?还是应该为UI创建自己的操作/减少器?

另外…当我存储UI状态时,如何确保刷新浏览器后,页面状态仍然完全相同?就像普通网页将包含从服务器获取的数据一样。

我有Redux,中间装着厚重的便服,还有一家商店。到目前为止,我已经在React工作了几个月。

谢谢!昆顿


阅读 329

收藏
2020-07-22

共1个答案

小编典典

我们的团队为此花了几天的时间。我们想要UI状态而不是将这些状态放入Redux的状态树的原因可以是:

  1. 这些UI状态仅与非常少的组件相关。但是有时候我们需要在其中共享这些状态。例如,一个控制Modal的Button,它们都需要读/写’isModalOpen’状态。

  2. 这些状态不是数据,它们是UI首选项,可以在卸载组件时将其重置为默认状态。将它们保留在单个Redux存储中听起来像污染状态树。

我们尝试了:

  1. 仅为UI创建单独的redux状态树。
  2. 添加一个主分支,为所有“ UI”状态说“ state.UI”。

但是,所有这些都涉及必须使用/实现自定义中间件,操作和简化程序。硬。

最后,我设置了react-provide-state。它真的很好。它的唯一缺点是您无法轻易在浏览器控制台中看到ui状态,例如Redux树中的状态。而且,您只能通过UI(用户操作事件回调)来更新状态。没错,我们正在谈论的是UI状态。

2020-07-22