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

前言

最近在熟悉react的时候有用到redux，对数据进行全局的状态管理，但是发现和vuex一样会出现刷新之后数据丢失的问题，于是在github上面查阅了 redux-persist 插件**，**使用redux-persist进行持久化数据存储 。

通常我们会使用sessionStorage或者localStorage来进行数据存储，但既然我们使用了redux来管理和存储全局数据，此时再使用sessionStorage或者localStorage存储，感觉会本末倒置，而且还增加了工作量。

这个时候 **redux-persist，**满足你的需求，它结合redux将store中的数据缓存到浏览器的sessionStorage或者localStorage中

redux-persist持久化插件

1.安装

yarn add redux-persist --save

2.在store.js里面引入，存储到storageSession

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
import {persistStore, persistReducer} from 'redux-persist';
//  存储机制，当前使用sessionStorage, 可换成localStorage
import storageSession from 'redux-persist/lib/storage/session'

const persistConfig = {  
  key: 'root', // 必须有的  
  storage:storageSession, // 缓存机制  
  // blacklist: ['loginStatus'] reducer 里不持久化的数据,除此外均为持久化数据  
  whitelist: ['loginStatus'] // reducer 里持久化的数据,除此外均为不持久化数据
}

const persistedReducer = persistReducer(persistConfig, reducer)
export default () => {  
  let store = createStore(persistedReducer, applyMiddleware(thunk));  
  let persistor = persistStore(store);  
  return { store, persistor };
};

3.入口文件index.js，将PersistGate标签作为父标签

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store/index";
import { PersistGate } from 'redux-persist/integration/react'
import { persistor } from "./store/index";
import App from "./App.js";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(  
  <HashRouter>    
    <Provider store={store}>      
      <PersistGate loading={null} persistor={persistor}>        
         <App />      
    </PersistGate>    
    </Provider>  
  </HashRouter>,  
  document.getElementById("root")
);
serviceWorker.unregister();

最后，这样就完成了通过redux-persist实现redux持久化本地数据存储。

点击跳转插件github地址

点击个人博客

感谢

• 如果本文对你有帮助，点个赞再走呗❥(^_-)！感谢阅读。
• 文中如有错误，欢迎在评论区批评指正。
• 图片来源网络，版权如有侵犯请联系本人删除。