ReactJS Redux State（全局状态）+ React.Context（本地状态）

Posted 2023-04-14

【中文标题】ReactJS Redux State（全局状态）+ React.Context（本地状态）

【英文标题】：ReactJS Redux State (global state) + React.Context (local state)

【发布时间】：2020-08-06 15:05:37

【问题描述】：

我是 ReactJS 世界的新手，我需要您对 ReactJS 状态的意见。

我开始在我的应用程序中使用 Redux 来获取全局状态（全局模块），它非常适合，因为任何时候我需要状态，我都可以从任何地方调用它。 在 Redux 中，我喜欢保留通知，它们显示在我的应用程序的所有页面上，我也保留应用程序版本（演示/实时），换句话说，我尝试保持 Redux（全局状态）全局值。

在我的应用程序中，我也有页面，每个页面都有其特定的状态和组件。当客户端离开页面时，我不再需要它的状态。这就是为什么我不喜欢在 Redux 中保留状态，因为当它离开页面时，页面状态仍然保留在 Redux 中。 因此，在这种情况下，将页面状态保持在 React.Context (+ React.Reducer) 中似乎是正确的。

React.Context 优点：

当客户端离开页面时，状态自动移除 当客户端访问页面时，状态是干净的，因为状态是与组件一起创建的

React.Context 缺点：

将 Redux 状态和上下文状态结合起来很复杂 两种类型的存储，意味着需要维护的代码更多（React.Context 的功能更少）

你怎么看，正如我解释的那样，将 Redux 与 React.Context 一起使用是可以的，它解决了问题还是产生了更多问题？

对不起，我的英语不好。

【问题讨论】：

当您谈到本地状态时，不确定您为什么不只使用钩子。你需要上下文吗？

@O.o 因为一个页面可能有多个组件，所以我需要上下文来将状态传递给页面子组件。

【参考方案1】：

尝试管理两个状态管理容器可能会变得笨拙，并且出于一致性考虑也不理想。我个人喜欢 React Hooks + Context，因为我觉得它简单而干净。您应该能够单独获得相同的结果，但是如果您已经使用 Redux 设置了通知系统，则需要考虑另一件事。此外，当用户使用 componentWillUnmount 生命周期方法离开页面时，您仍然可以使用 Redux 并清除 Redux 存储。阅读它们，那里有很多有用的文档，以及内容丰富的比较文章——看看你最喜欢哪一个，并认为最适合你的具体情况。

文档

反应钩子：https://reactjs.org/docs/hooks-intro.html 反应上下文：https://reactjs.org/docs/context.html React-Redux：https://react-redux.js.org/introduction/why-use-react-redux

文章

https://academind.com/tutorials/reactjs-redux-vs-context-api/ （倾向于 Context + Hooks）：https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/ （对 Redux 有意见）：https://blog.softwaremill.com/react-context-api-vs-redux-the-eternal-dichotomy-24639907fc98