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

Question

我正在研究什么是存储 UI 状态的最佳方式，我是否应该使用像 Redux-UI (https://github.com/tonyhb/redux-ui) 这样的东西来 store/manage UI状态？或者我应该为 UI 创建自己的 actions/reducers?

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

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

谢谢！ 昆顿

Answer 1

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

1. 那些UI状态只与极少数组件相关。但有时我们需要在它们之间共享这些状态。比如一个Button控制一个Modal，它们都需要read/write 'isModalOpen'状态。

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

我们尝试过：

1. 为 UI.
创建一个单独的 redux 状态树
2. 添加一个主分支，对所有 'UI' 个州说 'state.UI'。

然而，所有这些都涉及必须 use/implement 自定义中间件、操作和缩减器。很难。

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