使用 localStorage 代替 Redux 或 Context API 可以吗？

Posted 2023-03-05

【中文标题】使用 localStorage 代替 Redux 或 Context API 可以吗？

【英文标题】：Is it ok to use localStorage instead of Redux or Context API?

【发布时间】：2020-09-22 05:26:09

【问题描述】：

我使用 React 已经有一段时间了，一段时间后我开始问自己，为什么不将我的组件需要共享的每条数据都存储在本地存储中，而不是使用 Redux。 Redux 需要如此多的样板，而 localstorage 则如此简单。你可以说你不能在 localstorage 中存储对象，但你可以 JSON.stringfy 它们，在恢复时只需将它们解析回来。所以很可能有一些我无法正确看到的东西，因为 Redux 被大量使用，而 localstorage 通常用于保存您不希望在刷新时丢失的数据以及类似的事情。

【问题讨论】：

在我的脑海中，我知道您无法对 localStorage 中的更改状态做出反应，例如 useEffect 中的依赖项。但我认为现有的库可以满足您的需求，例如 use-persisted-state。

这能回答你的问题吗？ React Context Api vs Local Storage

localStorage 真的很慢

【参考方案1】：

当我开始开发 React 应用程序时，这个问题一直在我脑海中浮现。 使用 redux 而不是 localStorage 的原因有很多。 但至少

将 Redux 与 react-redux 一起使用不仅用于存储数据。不要忘记状态的改变会重新渲染所有监听该状态的组件。这正是 react-redux 所做的。 从 localStorage 进行字符串化/解析会使您的应用（大规模）变慢，并且在更改状态时也不会同步所有组件。

个人建议 在开发 React 应用程序 4 年多之后，尽可能多地使用 Context API 而不是 Redux

【讨论】：

changing in a state will reRender All components that listens to that state. and that is really what redux do. 不，这就是 react-redux 所做的。 Redux 只是事件存储，对 React 没有任何了解。

@HMR 是的，你是对的。通过使用 react-redux，您将获得智能组件的全部功能。所以，我想他是想用 localStorage 替换 redux 和 react-redux。顺便说一句，我会编辑它，谢谢:)

【参考方案2】：

Redux 和 localStorage 实际上有不同的用例。您将使用 Redux 跨多个组件管理应用程序状态。

您将使用本地存储在浏览器中保存属性以供以后使用。问题是对 localStorage 的任何更改都不会反映在您的应用程序上。您必须手动完成。

【讨论】：

== >问题是本地存储上的任何更改都不会反映在您的应用程序上。您必须手动完成。 |这似乎更准确。

【参考方案3】：

react-redux 的目的是允许其他组件连接到状态，然后对更改做出反应。您正在失去使用 react-redux/context api 的全部范围。

【讨论】：

您将 redux 的目的描述为 react-redux 是什么。 Redux 是一个事件存储，事件存储将您的应用程序中发生的事情（动作）与发生某事时需要完成的事情的实现（中间件和减速器）解耦。这使您能够以不同（更易于维护）的方式编写代码，并使用 redux 开发工具来调试您的代码。 Here 是 redux 的动机，它与 React 关系不大，但可以与 React 一起使用。

我已经编辑了答案。这个想法仍然存在，从本地存储（字符串化、观察者等）管理状态比使用专用状态管理解决方案要复杂得多。

【参考方案4】：

答案就在您的问题中，是的，本地存储仅用于在浏览器中存储数据，而 redux 和 context api 解决了一些不同的问题。它将您的数据层与您的视图分开，以便轻松管理您的数据状态。如果应用程序不是很大，那么您应该考虑使用 Context API。 您可以阅读此article 了解更多信息。 请注意，对于较大的数据集，字符串化和解析本身是一项相当繁重的操作。