redux利用redux-persist实现数据持久化

最新推荐文章于 2024-09-10 09:49:55 发布

alt琳

最新推荐文章于 2024-09-10 09:49:55 发布

阅读量1.5k

点赞数

分类专栏： react 文章标签： js react redux-persist

本文链接：https://blog.csdn.net/qq_37162688/article/details/95452261

版权

本文介绍如何在redux应用中通过redux-persist来实现数据持久化，避免页面刷新后数据丢失。通过安装和配置redux-persist，可以将redux状态自动存储到浏览器缓存中，确保数据在页面重新加载后仍然保留。

摘要由CSDN通过智能技术生成

我们在使用redux的过程中会出现页面刷新redux中数据丢失的情况，我们有时候就会用到localstorage，sessionstorage等，但是我们都用了redux，应该尽量避免使用这两个。

这里推荐使用redux-persist，他会将你state中的数据放入缓存，保持数据持久化：
首先下载包：
在这里插入图片描述
在store中使用

// 引入createStore

import reducer from './../reducer'
import {
    createStore } from 'redux'
import {
    devToolsEnhancer } from 'redux-devtools-extension'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

alt琳

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【React】redux-persist的使用

charoncrat的博客

06-26

511

基于React框架，redux-persist的使用

react中redux的使用及redux-persist 数据持久化（精简版）

weixin_43617604的博客

04-25

682

react中redux的使用教程

参与评论您还未登录，请先登录后发表或查看评论

redux数据持久化（redux-persist的使用）

hbmern的博客

04-14

9778

一、数据持久化：一般是指页面刷新后，数据仍然能够保持原来的状态。一般在前端当中，数据持久化，可以通过将数据存储到localstorage或Cookie中存起来，用到的时候直接从本地存储中获取数据。而redux-persist是把redux中的数据在localstorage中存起来，起到 持久化的效果。二、使用：安装：npm i redux-persist --save 在store.js中使用 //引入createStore，专门用于创建redux中最为核心的store对象 i.

react中redux数据持续化 ———— redux-persist

2401_82752568的博客

04-11

1544

这是小编的原来的index.js。添加redux-persist。

Redux持久化插件-解决刷新页面数据丢失问题

一个前端工程师

12-31

3451

使用redux页面刷新数据丢失问题？别看其他的了，直接上干活，直接抄代码，懂？

Redux-Persist 教程：持久化你的React应用状态

最新发布

gitblog_00447的博客

09-10

241

Redux-Persist 教程：持久化你的React应用状态 react-persist???? Persist and rehydrate React state to localStorage.项目地址:https://gitcode.com/gh_mirrors/re/react-persist 1. 项目介绍 Redux-Persist 是一个在React应用中用于持久化Redux状态的...

React通过redux-persist持久化数据存储的方法示例

10-17

需要注意的是，虽然使用redux-persist可以方便地实现数据的持久化，但是不当地使用可能会带来性能问题。因为本地存储如localStorage是同步操作，存储大量数据或者频繁操作都可能影响页面的响应速度。因此在实际应用...

dva-model-persist:类似redux-persist和dva-redux-persist和工具

05-09

之前基于redux-persist@5.*开发的dva-resist-persist，在异步加载model时并不会存贮model的state,所以使用redux的enhancer特性开发这个支持异步model加载的工具安装教程 yarn add dva-model-persist 或者 npm i -S ...

redux-persist-electron-storage:Redux持久存储电子适配器

05-13

还原持久电子存储存储适配器可与带有一起使用安装 npm npm i -S electron-store redux-persist-electron-storage 纱 yarn add electron-store redux-persist-electron-storage 用法要使用redux-persist-electron...

redux-persist-complex-transform:这种转换允许从redux-persist过滤，加密，压缩，版本控制和保留持久数据。也适用于不可变和无缝不可变的数据结构

03-26

信息这种转换允许从redux-persist过滤，加密，压缩，版本控制和保留持久数据。也适用于不可变和无缝不可变的数据结构。纱线安装 yarn add redux-persist-complex-transform 配置多变的类型描述配置 {[key：string]：{Options＆Exclusive options}} 配置所选减速器的转换。（键代表在redux存储中使用的reducer名称）数据结构细绳状态数据结构。唯一可用的选项：“普通”，“不可变”，“无缝不可变”。（默认值：纯色）密码细绳数据加密密码。（选修的）白名单大批指定应在其上应用此转换的减速器。（默认值：全部在上面的配置中列出）选项多变的类型描述 defaultState {[key：string]：任意} 重新定义所选减速器的默认状态。（仅与默认（auto

redux-store-persist:订阅Redux存储并复制到localStorage或sessionStorage

05-22

Redux商店持续存在订阅Redux Store并将其复制到localStorage或sessionStorage 。特征将redux存储持久化在localStorage或sessionStorage 配置localStorage或sessionStorage密钥名称加密和解密Redux存储正在安装 # install via NPM $ npm install @redux-store/localstorage # or $ npm install @redux-store/sessionstorage # install via YARN $ yarn add @redux-store/localstorage # or $ yarn add @redux-store/sessionstorage 贡献克隆它（ git clone git@github.com:

Redux 状态持久化之 redux-persist 使用示例

笔记、经验、日常分享

04-24

872

同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。

react-redux使用总结（一）

weixin_45031850的博客

10-14

825

redux、react-redux、toolkit、react-persist初步使用总结

redux-persist管理redux, 解决刷新react-redux数据丢失！

weixin_43330752的博客

12-25

3794

在我们实际开发react项目中可能有某些需求需要持久化报错redux里面的数据，比如登录状态，这时候就可以用到redux-persist 这款插件解决这个问题，它的原理是使用sessionstorage来持久化数据。 1：安装redux-persist这款插件 npm install redux-persist --save // yarn add redux-persist...

Redux

hdj0511的博客

10-17

647

Redux

(十一)学习笔记--redux-persist持久化数据存储+中间件封装

Augustine_Cyq的博客

06-09

1650

说明：一般在react项目中，我们通过redux和react-redux来存储和管理数据，但是使用redux存储数据时，会有一个问题，如果用户刷新了页面，那么通过redux存储的全局数据就会被重置，比如登录状态等。这个时候有没有解决办法呢？答案肯定是有的：一般我们可以使用sessionStorage或者localStorage来达到数据存储的要求，但既然我们使用了redux来管理和存储全局数据，如果再使用sessionStorage或者localStorage来读写数据，.

react store 刷新页面丢失

Angela_L的博客

02-20

1725

在react中可以使用redux-persist包，将store保存在浏览器的sessionStorage或者localStorage中。使用浏览器内部存储的方式进行存储在cookie，localStorage，sessionStorage 使用的时候直接获取就好。1.redux-persist可以让你的数据从state分离出来，保存到浏览器缓存中，以便实现数据的持久化存储。在我们使用项目的时候会用到redux来进行缓存机制，但是刷新页面之后store 就丢失或者重置。

React 之 redux-persist 持久化

zhenshu_guo的博客

12-24

1540

最终状态：{ foo: mergedFoo, bar: initialBar } // 注意： { foo: mergedFoo, bar: initialBar } initialFoo 和 incomingFoo 是浅层合并的。最终状态： { foo: incomingFoo, bar: initialBar } // 注意 incomingFoo 覆盖 initialFoo。最终状态： { foo: incomingFoo } // 最终为传入的状态。状态协调器定义如何将传入状态与初始状态合并。

redux-toolkit数据持久化

07-23

要实现Redux Toolkit的数据持久化，你可以使用一些库或中间件来帮助你完成这个任务。下面是一种常用的方法： 1. 使用redux-persist库：redux-persist是一个用于在Redux中实现数据持久化的库。它提供了一个简单的方法来将Redux状态保存到本地存储（如LocalStorage或AsyncStorage）中，并在应用程序重新加载时还原状态。首先，安装redux-persist库： ``` npm install redux-persist ``` 然后，在你的Redux store配置中，使用`persistStore`函数来创建持久化的store： ```javascript import { configureStore } from '@reduxjs/toolkit'; import { persistStore, persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; // 默认使用LocalStorage import rootReducer from './reducers'; const persistConfig = { key: 'root', storage, }; const persistedReducer = persistReducer(persistConfig, rootReducer); export const store = configureStore({ reducer: persistedReducer, }); export const persistor = persistStore(store); ``` 这里，`persistConfig`对象用于配置持久化设置。你可以指定一个键（key）和存储引擎（storage），它默认使用LocalStorage。然后，使用`persistReducer`函数将根reducer与配置一起包装，创建一个持久化的reducer。最后，通过调用`persistStore`函数来创建一个持久化的store，并导出store和persistor。 2. 在根组件中使用`PersistGate`组件：`PersistGate`是redux-persist提供的一个React组件，用于在应用程序加载时等待持久化恢复完成。在根组件中使用`PersistGate`包裹你的应用程序组件，并传入`persistor`作为prop。 ```javascript import { PersistGate } from 'redux-persist/integration/react'; import { persistor } from './store'; ReactDOM.render( <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider>, document.getElementById('root') ); ``` 这样，当你的应用程序重新加载时，Redux状态将从本地存储中恢复。请注意，这只是一种实现Redux Toolkit数据持久化的方法之一，你也可以使用其他类似的库或中间件来实现类似的功能。