在React項(xiàng)目的開發(fā)中經(jīng)常會(huì)遇到，保存一些當(dāng)前頁面的數(shù)據(jù)，
防止用戶刷新導(dǎo)致頁面出現(xiàn)報(bào)錯(cuò)或者是空白

詳情頁的數(shù)據(jù)，是通過列表頁路由跳轉(zhuǎn)傳過來的id，去后臺(tái)拿的數(shù)據(jù)
如果用戶刷新當(dāng)前頁面，就會(huì)導(dǎo)致拿不到id,這個(gè)時(shí)候就會(huì)出現(xiàn)下面情況：

這個(gè)時(shí)候需要用到redux-persist，

```javascript import { createStore, combineReducers, applyMiddleware, compose } from 'redux' import reducers from './reducers' import { persistStore, persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage' import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2' import thunk from 'redux-thunk' import { playMode } from '../common/js/config' import { loadSearch, loadPlay, loadFavorite } from '../common/js/cache'const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; //持久化配置 const persistConfig = {key: 'globalData',storage: storage,stateReconclier: autoMergeLevel2,blacklist: ['deviceData']//寫在這塊的數(shù)據(jù)不會(huì)存在 storage }const myPersistReducer = persistReducer(persistConfig, combineReducers(reducers))const store = createStore(myPersistReducer,{globalBackgroundColor:'#1890ff',//全局主題色currentDeviceId:''//當(dāng)前設(shè)備Id},composeEnhancers(applyMiddleware(thunk)))export const persistor = persistStore(store)export default store

之后改寫reducer.js文件中的寫法：

import {SET_CURRENT_DEVICE_ID} from './actions' import {getStore, getStoreJSON} from "../utils/utils";export default {currentDeviceId(state={},action){const { type, payload } = action;switch (type) {case SET_CURRENT_DEVICE_ID:if(payload){return {...payload}}else{return {...JSON.parse({...getStoreJSON('persist:globalData')}.currentDeviceId)}}default:}return state} }

在刷新之后，payload為undefined時(shí)候，我們以另一種方式返回id

最后無論我們?cè)趺此⑿?#xff0c;都不會(huì)丟失id

總結(jié)

以上是生活随笔為你收集整理的react-redux中的持久化数据存储redux-persist的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。