如何在刷新时保留 redux 状态树? [英] How can I persist redux state tree on refresh?

问题描述

Redux 文档的第一原则是:

The first principle of Redux documentation is:

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

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

而且我实际上认为我很好地理解了所有原则.但我现在很困惑，申请是什么意思.

And I actually thought that I understand all of the principles well. But I'm now confused, what does application mean.

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

If application means just one of little complicated part in a website and works in just one page, I understand. But what if application means the whole website? Should I use LocalStorage or cookie or something for keeping the state tree? But what if the browser doesn't support LocalStorage?

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

I want to know how developers keep their state tree! :)

推荐答案

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

If you would like to persist your redux state across a browser refresh, it's best to do this using redux middleware. Check out the redux-persist and redux-storage middleware. They both try to accomplish the same task of storing your redux state so that it may be saved and loaded at will.

--

编辑

我已经有一段时间没有重新审视这个问题了，但看到另一个(尽管更多的投票支持)鼓励推出自己的解决方案，我想我会再次回答这个问题.

It's been some time since I've revisited this question, but seeing that the other (albeit more upvoted answer) encourages rolling your own solution, I figured I'd answer this again.

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

As of this edit, both libraries have been updated within the last six months. My team has been using redux-persist in production for a few years now and have had no issues.

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

While it might seem like a simple problem, you'll quickly find that rolling your own solution will not only cause a maintenance burden, but result in bugs and performance issues. The first examples that come to mind are:

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

1. JSON.stringify and JSON.parse can not only hurt performance when not needed but throw errors that when unhandled in a critical piece of code like your redux store can crash your application.
2. (Partially mentioned in the answer below): Figuring out when and how to save and restore your app state is not a simple problem. Do it too often and you'll hurt performance. Not enough, or if the wrong parts of state are persisted, you may find yourself with more bugs. The libraries mentioned above are battle-tested in their approach and provide some pretty fool-proof ways of customizing their behavior.
3. Part of the beauty of redux (especially in the React ecosystem) is its ability to be placed in multiple environments. As of this edit, redux-persist has 15 different storage implementations, including the awesome localForage library for web, as well as support for React Native, Electron, and Node.

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

To sum it up, for 3kB minified + gzipped (at the time of this edit) this is not a problem I would ask my team to solve itself.

这篇关于如何在刷新时保留 redux 状态树?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！