无涯教程网

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

发布于05月13日

Redux文档的第一个原则是:

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

我真的认为我很理解所有的原则.

如果应用程序只是网站中一个小而复杂的部分，并且只在一个页面中工作，我理解.但如果应用程序意味着整个网站呢？我应该使用LocalStorage或cookie之类的工具来保存状态树吗？但是如果浏览器不支持本地存储呢？

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

推荐答案

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

--

Edit

我已经有一段时间没有重新讨论这个问题了，但是看到另一个(尽管答案更高)鼓励你推出自己的解决方案，我想我应该再次回答这个问题.

截至本次编辑，这两个库都在过go 六个月内进行了更新.我的团队在生产中使用redux已经有几年了，没有任何问题.

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

JSON.stringify和JSON.parse不仅会在不需要时影响性能，还会引发错误，如果在关键代码段(如redux应用store )中不进行处理，可能会导致应用程序崩溃.
(在下面的回答中部分提到):弄清楚何时以及如何保存和恢复应用程序状态并不是一个简单的问题.经常这样做会影响你的表现.还不够，或者如果状态的错误部分持续存在，你可能会发现自己有更多的bug.上面提到的库在其方法上经过了战斗测试，并提供了一些非常简单的定制行为的方法.
redux(尤其是在React生态系统中)的一部分优点在于它能够被放置在多种环境中.截至本次编辑，redux persist有15 different storage implementations个，包括用于web的可怕localForage library，以及对React Native、Electron和Node的支持.

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

Reactjs相关问答推荐

从app.js导航，这是在BrowserRouter包装之外

避风港访问端口以包含Reaction应用程序

Npm运行构建`在Next.js 14中不起作用

将动态元素中的输入数据传输到Reaction

我应该如何管理设置组件初始状态的复杂逻辑？

对搜索引擎优化来说，react 头盔的异步足够了吗？

有没有比；KeyableShell；组成部分

将 useRef 与 useImperativeHandle 一起使用时，React 不会重新渲染

组件安装后调用自定义钩子

是的验证：使用 useFieldArray 访问表单值

React - 如何重定向页面以显示数据修改？

如何使用 redux 和 react-plotly.js

当每个元素都可拖动时，移动设备上的滚动列表出现问题

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色？

如何在 nextjs 中单击按钮时动态导入和渲染组件？

如何将我的 ID 值传递给下一个组件？

自动重新获取不起作用 - RTK 查询

使用输入类型文本对 useState 和日期做出react

如何使用react 路由将 url 参数限制为一组特定的值？

在 React 中，为什么不能向空片段添加键(短语法)？

实用课程推荐

相关教程推荐