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ù),更具體來(lái)說(shuō),就是我們狀態(tài)管理的數(shù)據(jù)狀態(tài)進(jìn)行持久化.所以,這里直接在store里面進(jìn)行配置,當(dāng)然你在入口index或者其他地方配置未嘗不可

簡(jiǎn)要步驟

1. 引入相關(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ù)你自己的名字來(lái)改

// 持久化根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ǔ)器：用來(lái)管理狀態(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({
    // 通過(guò)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')
);

參考資料

redux-persist

初心

我所有的文章都只是基于入門，初步的了解；是自己的知識(shí)體系梳理;

如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;

共勉