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

Question

我在与Firebase连接的React中构建一个Web应用程序，该应用程序对用户进行身份验证并存储帖子数据。在线上似乎有很多关于使用Redux的文档，但是关于没有Redux的持久状态的信息并不多。

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

以下两个示例假定用户已经通过身份验证，并且刚刚刷新了他们的页面。我们希望保留他们的会议，所以我们：

范例1：

• 应用会加载并检查本地存储中是否有最后存储的本地状态的字符串化对象。将状态设置为该状态或为空状态。
• 如果'state'已检索并设置，请用于this.state['uid']与Firebase同步状态（获取），然后再次更新本地存储状态。
• 每当用户更新内容时，请更新状态（更新Firebase）并更新本地存储状态。
• 用户注销后，清除本地存储'state'项。

范例2：

• 应用程序会加载并检查本地存储中是否有一个uid（在身份验证期间设置），如果找到该uid，则使用该uid与firebase（获取）同步状态。
• 如果用户重新加载页面，将从Firebase再次获取数据。
• 用户注销后，清除本地存储'uid'项。

在第一个示例中，我实际上保留了该状态的两个副本。一个在React的State，另一个在浏览器的本地存储中。如果用户关闭窗口或刷新页面。

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

还是正在构建一个需要在不依赖Redux的情况下保持用户和状态跨越不同路由的React应用程序？

如果没有Redux，学习React就足够了，所以我试图看看如果没有它，我是否可以管理。

Answer 1

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

哪个是最好的方法？

好吧，我想说第二种方法更好。我会避免在本地存储中保留状态副本。我只会保留某种令牌/ID（在您的情况下uid），它唯一地标识用户并且每次都会获取新数据。当您的应用程序增长时，管理本地存储中的这些状态可能会很困难。