解决react页面刷新，store中保存的状态消失问题

最新推荐文章于 2023-11-24 19:13:09 发布
最新推荐文章于 2023-11-24 19:13:09 发布
阅读量5.1k 收藏 1
点赞数 1
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_39648402/article/details/102935316
版权

redux的store状态数据不是永久保存的，state只是一个内存机制。

我们知道的本地数据库或者像localstorage之类的缓存系统才有可能长时间的保存数据，redux-persist可以让你的数据从state分离出来，保存到浏览器缓存中，以便实现数据的持久化存储

下面是我自己的代码，没有使用thunk中间件

我圈出的红色部分就是是用persist需要用到元素，其他关于action   都保持不变

 

暖暖小时光
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-login:react登录退出
05-15
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加路由器 添加自定义环境变量 在HTML中引用环境变量 在Shell中添加临时环境变量 在.env添加开发环境变量 我可以使用装饰器吗？ 使用AJAX请求获取数据 与API后端集成 节点 Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
react-router browserHistory刷新页面404问题解决方法
11-28
使用React开发新项目时，遇见了刷新页面，直接访问二级或三级路由时，访问失败，出现404或资源加载异常的情况，本篇针对此问题进行分析并总结解决方案。 背景 使用webpack-dev-server做本地开发服务器时，正常情况只需要简单使用webpack-dev-server指令启动即可，但是当项目处于以下两种情况时，往往需要有嵌套路由和异步加载路由： 我们使用react-router这种路由库构建单页面应用路由； 使用html-webpack-plugin插件动态将加载js的[removed]标签注入html文档； 这时，访问localhost:9090是可以正常加载页面和js等文
React Native中的RefreshContorl下拉刷新使用
11-28
我们知道App中都有下拉加载，在React Native中也有类似的控件 一、属性方法 （1） onRefresh function 在视图开始刷新的时候调用 （2） refreshing bool 视图是否在刷新时显示指示器，也表明当前是否在刷新中 （3） colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色，至少设置一种，最多可以设置4种 （4） enabled bool android平台适用 用来设置下拉刷新功能是否可用 （5） progressBackgroundColor ColorPropType 设置加载进度指示器的背景颜色 （6）
原生小程序使用redux设置状态管理
读心悦
04-19 397
微信小程序没有提供Promise版本的异步api; 把微信小程序异步api转化为Promise，用于处理redux中的异步action; 把微信小程序原生网络请求 request 转换为 promise，toPromise.js const toPromise = (wx) => { return (method) => { return (option) => { return new Promise ((resolve, reject) => {
redux-persist管理redux, 解决刷新react-redux数据丢失！
weixin_43330752的博客
12-25 3645
在我们实际开发react项目中可能有某些需求需要持久化报错redux里面的数据，比如登录状态，这时候就可以用到redux-persist 这款插件解决这个问题，它的原理是使用sessionstorage来持久化数据。 1：安装redux-persist这款插件 npm install redux-persist --save // yarn add redux-persist...
React-redux-dom解决刷新页面后数据丢失的问题
Mr-yang的随笔
08-05 2835
为什么要存储react-redux-dom中的数据？ 当页面刷新之后，redux中的数据会回到初始值，之前存储到redux中的数据也就不复存在了。 在reducer文件中： let shopDetailInfo = sessionStorage.getItem('data')?JSON.parse(sessionStorage.getItem('data')):{}; let defaultState = { data, }; export const homeData = (state = def
React-router之路由跳转导致store中的数据重置
麦子
03-03 1756
一、遇到问题的原因： 项目中React-router都是一级路由，当路由跳转的时候那个组件会被卸载掉，当返回那个组件的时候组件是重新构建的，componentdidmount会重置store中的数据，但是又不能用嵌套路由，嵌套路由会把路由到的所有组件都渲染出来。如果把加载store的函数放到父级组件的时候，当在本页面刷新浏览器的时候会找不到数据而报错。 二、解决办法： ...
react路由跳转和store存储
Aan___的博客
07-26 325
合计：{ totalPrice.toFixed(2) } navigate('/cart')}>去购物车{totalCount}
React实战 ---- 路由配置及多级导航切换路由
WRian_Ban的小晴天
12-23 1044
在管理系统这类项目中，比较常见的设计还是这样的。 404页面，宣传主页，登录页面，注册页面，找回密码页面单独处理。 而系统内部就需要统一管理了，不仅仅要管理用户信息 token的有效性，为了良好的用户体验，我们还有需要使用二级路由。 老规矩，先上源码Liz606/webpack-es6-react 讲解在这里：手把手带你搭建与配置Webpack + ES6 + React开发环境 这时我们就需要...
react-router 多路由共用同个组件，切换不刷新
MingleHDU的博客
06-20 1万+
先描述下需求吧。 从服务端获取菜单栏要展示的菜单项（如校园公告，乐课网，课程消息，乐答消息，作业消息，...，待办通知），其中校园公告，乐课网和代办通知是一定会有的菜单项（下文称为“常驻嘉宾”），而消息类（如课程消息，乐答消息，作业消息，...）根据运营后台的配置不同而不同（下文称为“本期特邀嘉宾”）。 接口返回数据： 实现思路： 根据type区分不同菜单类型，故可以用type来区...
详解React-Router中Url参数改变页面不刷新的解决办法
08-27
主要介绍了详解React-Router中Url参数改变页面不刷新的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【React-native】Redux 全家桶实用指南
冯一朔 - 有思考的程序员
08-20 1180
今天，想实现用户第一次登录后，下次免登录的功能。不难，但之前是用realm 数据库来实现的，就存一个用户信息，用 realm 难免有点杀鸡用牛刀之意，就想用 Redux 来实现，顺带温习下知识。 本文涉及到的组件有： react-redux 及 redux （ 基础 ） redux-persist （ 用于缓存 ） redux-thunk ...
解决redux数据刷新页面数据丢失问题（使用redux-persist持久化数据存储）
热门推荐
weixin_43295397的博客
04-11 1万+
说明： 一般在react项目中，我们通过redux和react-redux来存储和管理数据，但是使用redux存储数据时，会有一个问题，如果用户刷新了页面，那么通过redux存储的全局数据就会被重置，比如登录状态等。 这个时候有没有解决办法呢？答案肯定是有的： 一般我们可以使用sessionStorage或者localStorage来达到数据存储的要求，但既然我们使用了redux来管理和存储全局...
React通过redux-persist持久化数据存储
大灰狼的小绵羊哥哥的博客
05-04 1309
在React项目中，我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时，会有这么一个问题，如果用户刷新了网页，那么我们通过redux存储的全局数据就会被全部清空，比如登录信息等。 这个时候，我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage，localStorage是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。 但是在我们已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读
react 回退至上一页并刷新数据
最新发布
qq_56905650的博客
11-24 1359
网上有搜索出来大部分都是用useHistory，由于个人不太想回退react-router-dom(6.16.0)的版本。因此尝试除了useHistory之外的一些方法。
React-cli使用Redux以及使用redux-persist处理刷新页面redux中数据丢失的问题
marko_zheng的博客
08-31 1184
React-cli使用Redux以及使用redux-persist处理刷新页面redux中全局数据丢失的问题 写在前面：项目基于 react + typescript + react-router + antd + redux + redux-persist React-create-app中使用Redux 首先目录结构如下 | -- src | -- pages | -- Home | -- Home.tsx | -- Login | -- Login.tsx | -- st
React 你还在用 Redux 吗？更简化的状态管理工具（Recoil）
weixin_72099243的博客
10-29 421
同时引入 recoil 身上的 useRecoilValue 方法，可以获取你定义的 atom || selector 中的指定数据 （是不是跟 HOOK 的写法非常像）上面说的刷新会丢失数据的问题，你只要在当前页面用到了 Recoil 定义的 selector 它就会自动重新请求，永远不会出现数据突然丢失的问题！这一步做好之后，你可以在 src 文件之下定义 store（仓库）文件夹，名字随便起，按照自己喜欢的来（前提取的名字不要太骚被你的领导叫去喝茶）并且你也可以给返回的数据写上 TS 的类型！
react-router与react-redux跳转后保存store数据(基于"react-router": "^2.8.0")
weixin_30550271的博客
06-01 190
1.router引入 import { Route, IndexRoute, Router, hashHistory, browserHistory } from 'react-router'; <Router routes={routes} history={browserHistory}/> 假设store结构如下,分别是主页home，详情页detail，评论页com...
React Hook如何保证每次渲染state不会丢失，Dva Model在state中存储数据的底层原理
比起未来可期，我更喜欢如约而至
09-05 2156
问题描述 1、 我们知道JavaScript中想要实现类似于Java静态变量的话，可以用闭包和localStorage实现。 闭包：有权访问另一个函数作用域变量的函数叫做闭包。 满足三个条件 1. 定义了局部变量 2. 函数返回一个匿名函数 3. 返回的匿名函数中需要使用第一步定义的局部变量 局部变量被另一个函数使用，即变量被引用，所以就不会被回收了，因此可以利用这一个特性来封装一个私有变量。 本地存储是一个window的属性，包括localStorage和sessionStorage，前者一直
react 页面刷新
11-21
为了刷新React页面，可以使用React中的useState和useEffect钩子。useState用于在函数组件中声明状态变量，而useEffect用于在组件挂载、更新或卸载时执行副作用操作。 以下是一个简单的例子，演示如何使用useState和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值