前端素材 设计元素 界面设计 网页素材 网站模板 按钮素材 名片素材 字体设计 图标设计 生活百科
官方客服QQ号:3007971137  (一条龙搭建-联系我)
官方客服QQ号:3007947123  (一条龙搭建-联系我)

解决redux数据刷新页面数据丢失问题(使用redux-persist持久化数据存储)

前端素材 技术02-千编万码 7月前  次浏览

说明:

一般在react项目中,我们通过redux和react-redux来存储和管理数据,但是使用redux存储数据时,会有一个问题,如果用户刷新了页面,那么通过redux存储的全局数据就会被重置,比如登录状态等。

这个时候有没有解决办法呢?答案肯定是有的:
一般我们可以使用sessionStorage或者localStorage来达到数据存储的要求,但既然我们使用了redux来管理和存储全局数据,如果再使用sessionStorage或者localStorage来读写数据,这样就增大了工作量和代码冗余。
这个时候,redux-persist
满足你的需求,它结合redux,将store中的数据缓存到浏览器的sessionStorage或者localStorage中。
redux-persist 使用如下:

当前使用最新版本 redux-persist ^5.10.0


    1.在store.js里面

    

 import { createStore } from 'redux';
    import reducer from '../reducer';//引入deducer文件
    import {persistStore, persistReducer} from 'redux-persist';
    //  存储机制,可换成其他机制,当前使用sessionStorage机制
    import storageSession from 'redux-persist/lib/storage/session'
    // import storage from 'redux-persist/lib/storage'; //localStorage机制
    //import { AsyncStorage } from 'react-native'; //react-native
    // 数据对象
    const storageConfig = {
        key: 'root', // 必须有的
        storage:storageSession, // 缓存机制
        blacklist: ['name','age'] // reducer 里不持久化的数据,除此外均为持久化数据
    }
    或者
    const storageConfig = {
        key: 'root', // 必须有的
        storage:storageSession, // 缓存机制
        whitelist: ['name','age'] // reducer 里持久化的数据,除此外均为不持久化数据
    }
    const myPersistReducer = persistReducer(storageConfig, reducer)
    const store = createStore(myPersistReducer)
    export const persistor = persistStore(store)
    export default store
     2.在入口文件index.js里面将PersistGate标签作为父标签,如下:

    

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/lib/integration/react';
import configStore from './redux/store';
import {persistor} from './redux/store';

ReactDOM.render(
    <Provider store={configStore}>
        <PersistGate loading={null} persistor={persistor}>
            <Router/>
        </PersistGate>
    </Provider>,
    document.getElementById('root'));
这就完成了通过redux-persist实现redux持久化本地数据存储。

    3.接下来打开浏览器调试工具,查看浏览器的缓存,就可以看到缓存的数据。

    

此时再刷新页面,你就会发现数据还在。
已上是全部内容,希望我的理解能给你带来帮助,如有错误或不足之处,欢迎指正,谢谢!

相关链接

发表评论