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

Question

Redux文档的首要原则是:

The state of your whole application is stored in an object tree within a single store.

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

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

我想知道开发者如何保存他们的状态树! :)

Answer 1

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

--

编辑

自从我重新审视这个问题以来已经有一段时间了，但是看到另一个(尽管得到更多赞成的答案)鼓励推出自己的解决方案，我想我会再次回答这个问题。

截至本次编辑，两个库均在过去六个月内进行了更新。我的团队已经在生产中使用 redux-persist 几年了，没有出现任何问题。

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

1. JSON.stringify 和 JSON.parse 不仅会在不需要时损害性能，还会引发错误，如果在 Redux 存储等关键代码中未处理这些错误，可能会崩溃您的申请。
2. (在下面的答案中部分提到):弄清楚何时以及如何保存和恢复应用程序状态并不是一个简单的问题。经常这样做会损害性能。还不够，或者如果状态的错误部分持续存在，您可能会发现自己有更多错误。上面提到的库的方法经过了实战测试，并提供了一些非常简单的自定义行为的方法。
3. redux(尤其是在 React 生态系统中)的部分优点在于它能够放置在多个环境中。截至本次编辑，redux-persist 有 15 different storage implementations ，包括很棒的 localForage library适用于 Web，以及对 React Native、Electron 和 Node 的支持。

总而言之，for 3kB minified + gzipped (在进行本次编辑时)这不是我会要求我的团队自行解决的问题。