在react开发中，如何实现redux存储数据持久化？

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

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

原因：数据保存在内存中，刷新页面后，数据重置，所以，状态会返回初始化状态。

解决方案：数据持久化。简单地说，就是把数据保存在本地存储中，当然，需要做好数据的校验保密工作。

一些复杂的重要数据，需要和后端共同校验，比如token。

想要在redux中解决这个问题，我们可以采用数据持久化插件redux-persist。

vuex中我们使用的是vuex-persist持久化插件，redux中我们可以使用 redux-persist 插件来完成数据持久化 。

redux-persist 使用

redux-persist 安装：

npm i  redux-persist --save

或者

yarn add  redux-persist 

改造store.js

store.js

import { createStore, combineReducers } from "redux";
import { SidebarCollapsedReducers } from "./reducers/SidebarCollapsedReducers"; // 导入 SidebarCollapsedReducers

const reducer = combineReducers({
  SidebarCollapsedReducers,
});
const store = createStore(reducer);

export default store;

在store.js中引入用redux-persist

// src/redux/store.js 
import { createStore, combineReducers } from "redux";
import { SidebarCollapsedReducers } from "./reducers/SidebarCollapsedReducers"; // 导入 SidebarCollapsedReducers

import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // defaults to localStorage for web

const persistConfig = {
  // 注意这里 persistConfig
  key: "root",
  storage,
  whitelist: ["SidebarCollapsedReducers"], //设置SidebarCollapsedReducers数据持久化， 注意单词的拼写
};

const reducer = combineReducers({
  SidebarCollapsedReducers,
});

const persistedReducer = persistReducer(persistConfig, reducer); 

const store = createStore(persistedReducer);
const persisstore = persistStore(store);
// 导出
export { store, persisstore };

修改组件中引用store部分

原先写法

import store from "./redux/store";

改成

import { store } from "./redux/store";

在主入口文件，index.js中

// /src/index.js

import React from 'react'  
import ReactDOM from 'react-dom/client' 
import ReactReduxRenderComponent from './06-react-redux/app'   
import {store, persisstore} from './06-react-redux/redux/store';
import {Provider} from "react-redux";

import {PersistGate} from 'redux-persist/integration/react'  // 注意这里  

ReactDOM.createRoot(
    document.getElementById('root')
).render
(<Provider store={store}>
    <PersistGate loading={null} persistor={persisstore}>  // 注意这里  
        <ReactReduxRenderComponent></ReactReduxRenderComponent>
    </PersistGate>  // 注意这里  
 </Provider>
);

redux-persist Blacklist & Whitelist

// BLACKLIST
const persistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['navigation'] // navigation will not be persisted
};

// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};

最终效果