如何在刷新时保持Redux状态树？

孙承弼

2023-03-14

问题内容：

Redux文档的第一个原理是：

整个应用程序的状态存储在单个存储中的对象树中。

我实际上以为我很好地理解了所有原则。但是我现在对应用程序的含义感到困惑。

我知道，如果应用程序只是网站中复杂的小部分之一，并且仅用一页即可工作。但是，如果申请意味着整个网站怎么办？我应该使用LocalStorage还是cookie或其他保留状态树的东西？但是如果浏览器不支持LocalStorage怎么办？

我想知道开发人员如何保留其状态树！:)

问题答案：

如果您想在浏览器刷新期间保持Redux状态，最好使用redux中间件来实现。查看redux-
persist
和redux-
storage
中间件。他们都试图完成存储redux状态的相同任务，以便可以随意保存和加载它。

编辑

自从我重新讨论了这个问题已经有一段时间了，但是看到另一个问题（尽管答案更高）会鼓励您提出自己的解决方案，我想我会再回答一次。

在进行此编辑时，两个库都在最近六个月内进行了更新。我的团队已经在生产中使用redux-persist几年了，没有任何问题。

尽管这似乎是一个简单的问题，但是您会很快发现，推出自己的解决方案不仅会导致维护负担，还会导致错误和性能问题。我想到的第一个例子是：

JSON.stringify并且JSON.parse不仅会在不需要时损害性能，而且还会引发错误，而在诸如redux存储之类的关键代码中未处理这些错误时，可能会导致应用程序崩溃。
（以下答案中有部分提到）：弄清楚何时以及如何保存和还原应用程序状态不是一个简单的问题。经常这样做会损害性能。这还不够，或者如果错误的状态持续存在，您可能会发现自己有更多的错误。上面提到的库在其方法上经过了实战测试，并提供了一些非常简单的方法来自定义其行为。
Redux的优点（尤其是在React生态系统中）的部分原因是它可以放置在多个环境中。截至此编辑，redux-persist具有15种不同的存储实现，包括用于Web的出色的localForage库，以及对React Native，Electron和Node的支持。

综上所述，对于缩小的3kB +压缩（在此编辑时），这不是问题，我要求我的团队自行解决。