如何在刷新时保留 redux 状态树？

Question

Redux 文档的第一条原则是：

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

我实际上认为我很好地理解了所有的原则。但是我现在很困惑，应用程序是什么意思。

如果应用程序只是网站中的一个小复杂部分并且只在一个页面中工作，我理解。但是如果应用程序意味着整个网站呢？我应该使用 LocalStorage 还是 cookie 或其他东西来保存状态树？但是如果浏览器不支持 LocalStorage 怎么办？

我想知道开发人员如何保持他们的状态树！ :)

原文由 incleaf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

–

编辑

自从我重新审视这个问题以来已经有一段时间了，但是看到另一个（尽管更受欢迎的答案）鼓励推出你自己的解决方案，我想我会再次回答这个问题。

截至本次编辑，这两个库已在过去六个月内更新。我的团队几年来一直在生产中使用 redux-persist 并且没有遇到任何问题。

虽然这似乎是一个简单的问题，但您很快就会发现滚动自己的解决方案不仅会造成维护负担，还会导致错误和性能问题。首先想到的例子是：

1. JSON.stringify 和 JSON.parse 不仅会在不需要时损害性能，而且会抛出错误，当在像 redux 存储这样的关键代码中未处理时可能会导致应用程序崩溃。
2. （在下面的答案中部分提到）：弄清楚何时以及如何保存和恢复您的应用程序状态并不是一个简单的问题。这样做太频繁，你会损害性能。还不够，或者如果状态的错误部分持续存在，您可能会发现自己有更多的错误。上面提到的库在他们的方法中经过了实战测试，并提供了一些非常简单的方法来定制他们的行为。
3. redux 的部分优点（尤其是在 React 生态系统中）是它能够放置在多个环境中。在本次编辑中，redux-persist 有 15 种不同的存储实现，包括很棒的 web 的 localForage 库，以及对 React Native、Electron 和 Node 的支持。

总而言之， 对于 3kB 缩小 + gzipped （在此编辑时），这不是问题，我会要求我的团队自行解决。

原文由 michaelgmcd 发布，翻译遵循 CC BY-SA 4.0 许可协议