在React項目的開發中經常會遇到，保存一些當前頁面的數據，
防止用戶刷新導致頁面出現報錯或者是空白

詳情頁的數據，是通過列表頁路由跳轉傳過來的id，去后臺拿的數據
如果用戶刷新當前頁面，就會導致拿不到id,這個時候就會出現下面情況：

這個時候需要用到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']//寫在這塊的數據不會存在 storage }const myPersistReducer = persistReducer(persistConfig, combineReducers(reducers))const store = createStore(myPersistReducer,{globalBackgroundColor:'#1890ff',//全局主題色currentDeviceId:''//當前設備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時候，我們以另一種方式返回id

最后無論我們怎么刷新，都不會丟失id

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。