react中使用redux-persist做持久化储存的过程记录
作者：WeirdoPrincess
这篇文章主要介绍了react中使用redux-persist做持久化储存的相关资料,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
react中使用redux-persist做持久化储存
某天下午折腾着玩的 – 笔记
安装相关依赖
npm install @reduxjs/toolkit redux-persist redux react-redux
// store.jsx
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // 选择持久化存储引擎，如 localStorage 或 AsyncStorage
import rootReducer from "./reducers/index"; // 导入您的根 reducer
// 配置持久化设置
const persistConfig = {
key: "root", // 存储的键名
storage, // 持久化存储引擎
// 可选的配置项，如白名单、黑名单等 选其一就好了
// blacklist:['test'], // 只有 test 不会被缓存
// whitelist: ["test"], // 只有 test 会被缓存
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
reducer: persistedReducer,
middleware: getDefaultMiddleware({
serializableCheck: false, // 禁用严格模式
}),
});
const persistor = persistStore(store);
export { store, persistor };将 store 提供给应用程序：将 Redux store 提供给根组件，以便在整个应用程序中可以访问到 Redux 状态
// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./redux/store";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>
);reducer 示例：
// reducers/index.jsx
import { combineReducers } from "redux";
import userReducer from "./user";
import baseReducer from "./base";
const rootReducer = combineReducers({
user: userReducer,
base: baseReducer,
});
export default rootReducer;// reducers/user.jsx
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
token: "默认值token",
isLogin: false,
};
const user = createSlice({
name: "user",
initialState,
reducers: {
setToken: (state, action) => {
// 将传入的值设置为 token 的新值
state.token = action.payload;
},
},
});
export const { setToken } = user.actions;
export default user.reducer;在组件中使用
// App.jsx
import { useSelector, useDispatch } from "react-redux";
import { setToken } from "./redux/reducers/user";
const App = () => {
const user = useSelector((state) => state.user);
// 在页面组件中使用 useDispatch 获取 dispatch 函数，用于派发 action
const dispatch = useDispatch();
const setTokenFun = () => {
dispatch(setToken("一个新的token"));
};
return (
<>
<p>token=====：{user.token}</p>
<Button type="primary" onClick={setAddressFun}>
Set Token
</Button>
</>
);
};
export default App;补充：React-persist的使用（数据持久化）
在React项目中，我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时，会有这么一个问题，如果用户刷新了网页，那么我们通过redux存储的全局数据就会被全部清空，比如登录信息等。
这个时候，我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage，localStorage是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。
但是在我们已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？当然，它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。
一、安装
$ npm install redux-persist --save
二、使用
/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
//引入createStore，专门用于创建redux中最为核心的store对象
import { createStore, applyMiddleware ,combineReducers} from 'redux'
//引入redux-persist持久化
import { persistStore, persistReducer } from 'redux-persist'
// import localStorage from 'redux-persist/lib/storage'
import storage from 'redux-persist/lib/storage/index'
//引入为Count组件服务的reducer
import incrementReducer from './incrementReducer';
import personReducer from './personReducer';
//引入中间件 可传入action为函数
import thunk from 'redux-thunk';
// 引入redux-devtools-extension 第三方可视化redux的工具
import {composeWithDevTools} from 'redux-devtools-extension'
// import {composeWithDevTools} from 'redux-devtools-extension'
//实现persist数据持久化
const config = {
key: 'root',
storage:storage, //引入的storage是存在local或session
}
//里面保存的是redux完整的key和value 在mapStateToProps调动key
const allReducer = combineReducers({
incrementReducer,
personReducer
})
const store = createStore(persistReducer(config,allReducer),composeWithDevTools(applyMiddleware(thunk)))
persistStore(store)
export default store
//正常版暴露store,thunk是保证action可以接收函数
// export default createStore(reducer, applyMiddleware(thunk))对于reducer和action的处理不变，只需修改store的生成代码
到此这篇关于react中使用redux-persist做持久化储存的文章就介绍到这了,更多相关react redux-persis持久化储存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！