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

问题描述

Redux文档的第一个原理是:

The first principal of Redux documentation is:

我实际上以为我对所有校长都很了解.但是我现在对应用程序的含义感到困惑.

And I actually thought that I understand all of principals well.But I'm now confused what does application means.

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

If application means just one of little complicated part in website and works in just one page, I understand. But what if application means whole website? Should I use LocalStorage or cookie or something for keep the state tree? but what if 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种不同的存储实现，包括很棒的存储用于Web的 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 +压缩(在此时)编辑)这不是问题，我会要求我的团队自行解决.

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状态树?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！