简体繁体 English

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

[英]ReactJS Redux State (global state) + React.Context (local state)

原文 2020-04-23 10:14:46 4 1 javascript/ reactjs/ redux/ react-redux/ react-context

I am new in ReactJS World, and I need your opinion related to ReactJS state.我是 ReactJS 世界的新手，我需要您对 ReactJS state 的意见。

I started to use Redux in my application for global state (global modules), it fits really good because any time I need the state, I can call it from anywhere.我开始在全局 state（全局模块）的应用程序中使用 Redux，它非常适合，因为任何时候我需要 state，我都可以从任何地方调用它。 In Redux I like to keep notifications, they are shown on all pages in my App, also I keep app version (demo/live), in other words I try to keep in Redux (global state) global values.在 Redux 中，我喜欢保留通知，它们显示在我应用程序的所有页面上，我也保留应用程序版本（演示/实时），换句话说，我尝试保留 Redux（全局状态）全局值。

In my App I also have pages, each page have its specific state and components.在我的应用程序中，我也有页面，每个页面都有其特定的 state 和组件。 When the client leaves the page, I do not need its state anymore.当客户端离开页面时，我不再需要它的 state。 That's why I do not like to keep the state in Redux, because when it leaves the page, the page state is still keeped in Redux. That's why I do not like to keep the state in Redux, because when it leaves the page, the page state is still keeped in Redux. So, in this case seems to be correct to keep page state in React.Context (+ React.Reducer).因此，在这种情况下，将页面 state 保留在 React.Context（+ React.Reducer）中似乎是正确的。

React.Context Pros: React.Context 优点：

when the client leaves the page, the state is removed automatically当客户端离开页面时，自动删除 state
when the client access the page, the state is clean, because the state is created togheter with the component当客户端访问页面时，state 是干净的，因为 state 是与组件一起创建的

React.Context Cons: React.Context 缺点：

it's complicated to combine Redux state and Context state将 Redux state 和上下文 state 结合起来很复杂
two types of store, means more code to maintain (React.Context has less functionality)两种类型的 store，意味着需要维护更多的代码（React.Context 的功能更少）

How do you think, it is ok to use Redux togheter with React.Context as I explained, it solve the problem or it creates a lot more problems?您如何看待，正如我所解释的，将 Redux 与 React.Context 一起使用是可以的，它解决了问题还是产生了更多问题？

Sorry for my bad English.对不起，我的英语不好。

1 个解决方案

Attempting to manage two state management containers can become unwieldy and is also not ideal for the sake of consistency.尝试管理两个 state 管理容器可能会变得笨拙，并且出于一致性考虑也不理想。 I personally like React Hooks + Context, as I find it simple and clean.我个人喜欢 React Hooks + Context，因为我觉得它简单而干净。 You should be able to obtain the same result with either on their own, but if you have a notification system already setup with Redux that is another thing to keep in consideration.您应该能够单独获得相同的结果，但是如果您已经使用 Redux 设置了通知系统，那是另一件需要考虑的事情。 Also, you can still utilize Redux and have the Redux store cleared when a user leaves a page with the componentWillUnmount lifecycle method.此外，当用户使用componentWillUnmount生命周期方法离开页面时，您仍然可以使用 Redux 并清除 Redux 存储。 Read up on both of them, there's a lot of useful documentation out there, as well as informative comparison articles- see which you like the most and think would work best for your specific situation.阅读它们，那里有很多有用的文档，以及内容丰富的比较文章——看看你最喜欢哪一个，并认为最适合你的具体情况。