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

Posted 2023-02-22

【中文标题】如何在 Redux/React 中处理 UI 状态 - Redux-UI？

【英文标题】：How to Handle UI State in Redux/React - Redux-UI?

【发布时间】：2018-08-02 04:39:29

【问题描述】：

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

还有... 当我存储了 UI 状态后，如何确保浏览器刷新后，我仍然拥有与页面完全相同的状态？就像普通网页会包含从服务器获取的数据一样。

我安装了带有 thunk middle wear 的 Redux 和一个商店。到目前为止，我在过去的几个月里一直在使用 React。

谢谢！ 昆顿

【问题讨论】：

我不知道redux-ui，但你可以使用redux-persist将状态存储在localStorage或localForage中

【参考方案1】：

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

这些 UI 状态仅与极少数组件相关。但有时我们需要在它们之间共享这些状态。例如，一个 Button 来控制一个 Modal，它们都需要读/写 'isModalOpen' 状态。

这些状态不是数据，它们是 UI 首选项，可以在卸载组件时将它们重置为默认值。将它们持久化在单个 Redux 存储中听起来像是污染了状态树。

我们试过了：

仅为 UI 创建单独的 redux 状态树。 为所有“UI”状态添加一个主分支，例如“state.UI”。

但是，所有这些都涉及必须使用/实现自定义中间件、操作和减速器。很难。

最后，我发了react-provide-state。它真的很好用。它的唯一缺点是您无法在浏览器控制台中轻松查看像 Redux 树中的状态那样的 ui 状态。而且您只能通过 UI（用户操作事件回调）更新状态。这很公平，我们正在谈论的是 UI 状态。