Redux持久化

前言：

最近写了一个react项目，为了解决每次刷新，登录信息总是会丢失问题，因为我的登录信息是使用redux存储起来的，所以就需要使用redux持久化

使用redux-persist这个插件可以实现redux的持久化

安装

npm i redux-persist --save

使用

在store.js里面进行引入

1. 导入相应的函数

   import {persistStore,persistReducer} from 'redux-persist'
   

2. 将你所需要用的reducer进行合并

   const reducer = combineReducers({
   	global: globalSlice,
   	menu: menuSlice,
   	tabs: tabSlice,
   	auth: authSlice,
   	breadcrumb: breadcrumbSlice
   });
   

3. 配置持久化的信息

   storage:是需要引入的

   import storage from "redux-persist/lib/storage";
   

   const persistConfig = {
   	key: "root", //必须有
   	storage //存储位置
   };
   

4. 配置需要持久化的reducer

   在persistReducer里面含有两个参数，config和reducer

   其中congig就是一些配置的信息，包括存放位置，黑白名单等

   reducer就是你所用到的所有的reducer

   const persistReducerConfig = persistReducer(persistConfig, reducer);
   

5. 配置需要持久化的state

   这里面persistStore一般只接受一个参数，就是你createStore出来的store

   const persistor = persistStore(store);
   

6. 后续进行导出

   export default { store, persistor };
   

完整代码：

// import { legacy_createStore as createStore, combineReducers, Store, compose } from "redux";
import { Store } from "@reduxjs/toolkit";
import { createStore, combineReducers } from "@reduxjs/toolkit";
import globalSlice from "./modules/global/reducer";
import menuSlice from "./modules/menu/reducer";
import tabSlice from "./modules/tabs/reducer";
import authSlice from "./modules/auth/reducer";
import breadcrumbSlice from "./modules/breadcrumb/reducer";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
// 创建 store

const reducer = combineReducers({
	global: globalSlice,
	menu: menuSlice,
	tabs: tabSlice,
	auth: authSlice,
	breadcrumb: breadcrumbSlice
});
// 在这里面配置持久化
const persistConfig = {
	key: "root", //必须有
	storage //存储位置
};

const persistReducerConfig = persistReducer(persistConfig, reducer);

const store: Store = createStore(persistReducerConfig);

const persistor = persistStore(store);
export default { store, persistor };

参考链接： rt2zz/redux-persist: persist and rehydrate a redux store (github.com)

困惑

目前的createStore已经被抛弃了，使用configureStore来使用

但是configureStore他其实是内置了Reducers,他会自己的进行combine,无需我们重新调用combineReducers这个函数

那么我们在reduxjs/toolkit中又该如何实现redux的持久化呢？

或者说又该如何改进呢？欢迎各位大佬在评论区解答一下🙌