javascript - 如何在没有 Redux 的情况下在本地存储 React 中持久化状态？

Question

我正在用 React 构建一个连接到 Firebase 的网络应用程序，它可以对用户进行身份验证并存储发布数据。网上似乎有很多关于使用 Redux 的文档，但没有很多关于在没有它的情况下持久化状态的文档。

当用户刷新页面时，<App />的状态已重置，因此我需要保留现有状态/从 Firebase 检索它。一些文章建议使用本地存储来存储状态。但是考虑到最佳实践，什么应该存储在本地存储中？我的应用程序将所有状态存储在 <App /> 中，并将需要的状态作为 props 传递给相关组件。

以下两个示例假设用户已经通过身份验证并且刚刚刷新了他们的页面。我们希望保留他们的 session ，因此我们:

示例#1:

• 应用加载并检查本地存储以查找上次存储的本地状态的字符串化对象。将状态设置为该状态或空状态。
• 如果'state'检索并设置，使用 this.state['uid']与 Firebase 同步状态(获取)，然后再次更新本地存储状态。
• 每当用户更新某些内容时，更新状态(更新 Firebase)并更新本地存储状态。
• 当用户注销时，清除本地存储'state'项目。

示例#2:

• 应用加载并检查本地存储中的 uid(在身份验证期间设置)，如果找到，则使用它与 firebase 同步状态(获取)。
• 如果用户重新加载页面，系统会再次从 Firebase 获取数据。
• 当用户注销时，清除本地存储'uid'项目。

对于第一个示例，我有效地保留了状态的两个副本。 React 中的一个 State ，另一个在浏览器的本地存储中。以防用户关闭窗口或刷新页面。

我的问题是:最佳做法是什么？

或者，是否正在构建一个 React 应用程序，它需要在没有 Redux 的情况下跨不同的路径持久保存用户和状态？

没有 Redux，学习 React 就足够了，所以我想看看我是否可以在没有它的情况下进行。

Answer 1

在您的用例中，redux 不会帮助您，因为当用户刷新页面时，redux 的状态也会重置。如果你想在刷新/浏览器终止时保持你的应用程序的状态，那么你需要使用 localStorage/sessionStorage/cookies 等。

Which is best way?

嗯，我会说第二种方法更好。我会避免在本地存储中保留状态副本。我只会保留某种 token /id(在你的例子中是 uid)，它唯一地标识用户并且每次都会获取新数据。当您的应用程序增长时，可能很难在本地存储中管理这些状态。