1.前言
其实在vuex-persist持久化,用的也是这个东西
这个东西 就是持久化,其实所谓的持久化,在前端而言,一般都是指存储到localStorage里面,因为刷新也还在嘛,不像存在其他地方刷新就没了,这里不讨论存储到本地文件
我们在react再玩一遍,看看有啥不同,找点新鲜感
2. 环境配置
安装 默认就是生产安装
npm i redux-persist
3. 存储
持久化这个一般都是我们的数据,更具体来说,就是我们状态管理的数据状态进行持久化.所以,这里直接在store里面进行配置,当然你在入口index或者其他地方配置未尝不可
简要步骤
- 引入相关文件
// 持久化存储 state
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
2.相关配置 准备
例如黑白名单
const persistConfig = {
key: 'root',
storage,
}
3.持久化根reducer
reducer 当然根据你自己的名字来改
// 持久化根reducers
const persistedReducer = persistReducer(persistConfig, allReducers)
4.创建 持久化store对象
let store = createStore(persistedReducer )
5.持久化store对象
//最外层要导入
let persistor = persistStore(store);
6.导出 注意导出方式
export default store
export {persistor};
7.查看效果 localStorage已经有了
1.png
8.额外配置:例如黑名单,白名单等
const persistConfig = {
key: 'root',
storage,
// 黑名单 不缓存的
blacklist:['page404']
}
4. 附上完整代码
// 存储器：用来管理状态（获取状态 、修改状态）
import { createStore } from 'redux'
// 引入合并函数
import { combineReducers } from 'redux'
import reducer404 from '../pages/404/store/reducer404'
import reducerAd from '../pages/address/store/reducerAd'
// 1. 引入相关文件
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
// 2. 配置
const persistConfig = {
key: 'root',
storage,
//黑名单 不缓存
blacklist: ["page404"]
}
let allReducers = combineReducers({
// 通过page404 找404 模块的reducer
page404: reducer404,
pageAddress:reducerAd
})
// 3. 持久化根reducer和配置,并返回所有
const persistedReducer = persistReducer(persistConfig, allReducers)
// 4. 创建 持久化store对象
let store = createStore(persistedReducer)
// 5. 持久化store对象
let persistor = persistStore(store)
console.log("获取持久化存储信息:",persistor.getState())
// 6. 导出 注意导出方式
export default store
export { persistor }
// 7. 查看效果 localStorage已经有了
// 8. 额外配置 不想缓存某个模块 黑名单
// blacklist: ["page404"]
5. 持久化 到本地
1.默认会从 loaclStorage读取
2.可以避免多次请求
// redux存储器 react-redux 管理状态存储的容器
import store ,{persistor}from './store'
//注入器 负责把我们的 store 注入到全局 ,这样哪个组件都能用
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
