如何在不使用Redux的本地存储中保持状态React？

Question

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

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

以下两个示例假设用户已经过身份验证，并且刚刚刷新了他们的页面。我们希望保留他们的会话，我们也是如此：

示例＃1：

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

示例＃2：

• App加载并检查uid的本地存储（在身份验证期间设置），如果找到，则使用它来与firebase（fetch）同步状态。
• 如果用户重新加载页面，则会从Firebase再次提取数据。
• 当用户注销时，请清除本地存储State项目。

在第一个例子中，我实际上保留了两个州的副本。一个在React的const port = (process.env.PORT || 8010)中，另一个在浏览器的Local Storage中。如果用户关闭窗口或刷新页面。

我的问题是：哪种方法最佳？

或者，是否构建了一个React应用程序，需要在不使用Redux完全疯狂的情况下在不同路径上保持用户和状态？

学习React就足够了没有Redux的曲线，所以我试着看看我是否可以在没有Redux的情况下进行管理。

Answer 1

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

  

哪种方式最好？

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