1.前言
其實(shí)在vuex-persist持久化,用的也是這個(gè)東西
這個(gè)東西 就是持久化,其實(shí)所謂的持久化,在前端而言,一般都是指存儲(chǔ)到localStorage里面,因?yàn)樗⑿乱策€在嘛,不像存在其他地方刷新就沒了,這里不討論存儲(chǔ)到本地文件
我們?cè)?code>react再玩一遍,看看有啥不同,找點(diǎn)新鮮感
2. 環(huán)境配置
安裝 默認(rèn)就是生產(chǎn)安裝
npm i redux-persist
3. 存儲(chǔ)
持久化這個(gè)一般都是我們的數(shù)據(jù),更具體來說,就是我們狀態(tài)管理的數(shù)據(jù)狀態(tài)進(jìn)行持久化.所以,這里直接在store里面進(jìn)行配置,當(dāng)然你在入口index或者其他地方配置未嘗不可
簡(jiǎn)要步驟
- 引入相關(guān)文件
// 持久化存儲(chǔ) state
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
2.相關(guān)配置 準(zhǔn)備
例如黑白名單
const persistConfig = {
key: 'root',
storage,
}
3.持久化根reducer
reducer 當(dāng)然根據(jù)你自己的名字來改
// 持久化根reducers
const persistedReducer = persistReducer(persistConfig, allReducers)
4.創(chuàng)建 持久化store對(duì)象
let store = createStore(persistedReducer )
5.持久化store對(duì)象
//最外層要導(dǎo)入
let persistor = persistStore(store);
6.導(dǎo)出 注意導(dǎo)出方式
export default store
export {persistor};
7.查看效果 localStorage已經(jīng)有了
1.png
8.額外配置:例如黑名單,白名單等
const persistConfig = {
key: 'root',
storage,
// 黑名單 不緩存的
blacklist:['page404']
}
4. 附上完整代碼
// 存儲(chǔ)器：用來管理狀態(tài)（獲取狀態(tài) 肝断、修改狀態(tài)）
import { createStore } from 'redux'
// 引入合并函數(shù)
import { combineReducers } from 'redux'
import reducer404 from '../pages/404/store/reducer404'
import reducerAd from '../pages/address/store/reducerAd'
// 1. 引入相關(guān)文件
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. 創(chuàng)建 持久化store對(duì)象
let store = createStore(persistedReducer)
// 5. 持久化store對(duì)象
let persistor = persistStore(store)
console.log("獲取持久化存儲(chǔ)信息:",persistor.getState())
// 6. 導(dǎo)出 注意導(dǎo)出方式
export default store
export { persistor }
// 7. 查看效果 localStorage已經(jīng)有了
// 8. 額外配置 不想緩存某個(gè)模塊 黑名單
// blacklist: ["page404"]
5. 持久化 到本地
1.默認(rèn)會(huì)從 loaclStorage讀取
2.可以避免多次請(qǐng)求
// redux存儲(chǔ)器 react-redux 管理狀態(tài)存儲(chǔ)的容器
import store ,{persistor}from './store'
//注入器 負(fù)責(zé)把我們的 store 注入到全局 ,這樣哪個(gè)組件都能用
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')
);
