问题描述
我正在研究什么是存储UI状态的最佳方法，是否应该使用Redux-UI( https://github.com/tonyhb/redux-ui )来存储/管理UI状态?还是应该为UI创建自己的操作/减少器?
I am researching into what is the best way to store the UI state, Should I use something like Redux-UI (https://github.com/tonyhb/redux-ui) to store/manage the UI state? or should I create my own actions/reducers for the UI?
也...存储UI状态后，如何确保刷新浏览器后，页面状态仍然完全相同?就像普通的网页将包含从服务器获取的数据一样.
Also...when I have stored the UI state, how do I make sure if the browser is refreshed, I still have exactly the same state of the page? Just as a normal web page would including Data taken from the server.
我有Redux，中间装着厚重的便服，还有一家商店.到目前为止，我已经在React上工作了几个月.
I have Redux with thunk middle wear implemented and a store. I have worked with React for the past couple of months thus far.
谢谢！昆顿
推荐答案
我们的团队已为此花费了几天的时间.我们想要UI状态而不是将这些状态放入Redux的状态树的原因可以是:
Our team has spent some days on this. The reasons we want UI states, instead of putting those states to Redux's state tree, can be:
-
这些UI状态仅与非常少的组件相关.但是有时候我们需要在其中共享这些状态.例如，一个控制Modal的Button，它们都需要读/写'isModalOpen'状态.
Those UI states are only relevant to a very small number of components. But yet sometimes we need to share those states amongst them. For example, a Button to control a Modal, they both need to read/write the 'isModalOpen' state.
这些状态不是数据，它们是UI首选项，可以在卸载组件时将其重置为默认状态.将它们保留在单个Redux存储中听起来像污染状态树.
Those states are not data, they are UI preference and it is fine to reset them to the default upon component unmount. Persisting them in the single Redux store sounds like polluting the state tree.
我们尝试过:
- 仅为UI创建单独的redux状态树.
- 添加一个主分支，为所有"UI"状态说"state.UI".
但是，所有这些都涉及必须使用/实现自定义中间件，操作和简化程序.很难.
However, all these involve having to use/implement custom middleware, actions and reducers. Hard.
最后，我制作了反应-提供状态.它真的很好.它的唯一缺点是您无法轻易在浏览器控制台中看到ui状态，例如Redux树中的状态.而且，您只能通过UI(用户操作事件回调)来更新状态.没错，我们正在谈论的是UI状态.
At the end, I made react-provide-state. It works really well. The only drawback of it is your can not easily see the ui states like states in Redux tree in browser console. And you can only update states through UI (user action event callbacks). That's fair, it is UI states we are talking about.
这篇关于如何在Redux/React-Redux-UI中处理UI状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！