更多详细内容,请微信搜索“前端爱好者
“, 戳我 查看 。
在使用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
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。