React之redux的持久化_redux持久化

目录

安装

配置 

效果

---

在使用redux的时候我们会发现state中的数据一旦刷新页面就会返回初始化状态，vue中的vuex也是如此，无法持久保存vuex中state数据的状态

想要在redux中解决这个问题，我们可以采用数据持久化插件，vuex中我们使用的是vuex-persist持久化插件，redux中我们可以使用redux-persist插件来完成数据持久化

安装

npm i redux-persist --save

可以在package.json查看是否安装成功

配置 

找到配置redux的store.js文件

 在文件中我们需要导入 redux-persist的两个依赖包，persistReducer, persistStore，分别用来配置保存的数据源和保存数据的方法

import { createStore } from "redux";
import han from './chereduce';
//配置数据的持久化效果
import { persistReducer, persistStore } from "redux-persist";
//导入需要配置的数据源，可以选择，storage，cookie,session等
import storage from "redux-persist/lib/storage";
 
// let store=createStore(han)
 
//定义配置的信息
const persitConfig = {
    key:"root",
    storage:storage,
   // 如果不想将部分state持久化，可以将其放入黑名单(blacklist)中.黑名单是设置
//   blacklist: ['ll']
}
//创建持久化的配置persist的信息
const persist_reducers = persistReducer(persitConfig,han);
//创建存储对象并且抛出对象
const store = createStore(persist_reducers);
const persistor =  persistStore(store);
 
export { store, persistor };

在index.js入口文件中配置

 在入口文件中使用 PersistGate 包裹根组件。这将延迟渲染app 视图直到持久化状态取回并保存到redux中
导入对应抛出的store对象和persistor对象直接使用配置即可

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { PersistGate } from 'redux-persist/lib/integration/react';
import App from './App';
import './index.css';
import { persistor, store } from './redux/store';
import reportWebVitals from './reportWebVitals';
// import {persistor} from './redux/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
store.subscribe(()=>{
   root.render(
      <Provider store={store}>
         <PersistGate loading={null} persistor={persistor}>
         <BrowserRouter>
            <App />
         </BrowserRouter>
         </PersistGate>
      </Provider>
    )
})
 
reportWebVitals();

效果