Redux如何实现持久化数据存储在react项目，我们经常会用到redux来存储数据，但是会存在一个问题，就是当用户手动

在react项目，我们经常会用到redux来存储数据，但是会存在一个问题，就是当用户手动刷新页面时，redux中存储的数据就会被清空，这会让人很头疼，于是我发现了一个很好用的框架redux-persist，它会将redux的store中的数据缓存到浏览器的localStorage中。接下来我们来看一下怎么使用吧。

//configureStore.js

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
 
import rootReducer from './reducers'
 
const persistConfig = {
  key: 'root',
  storage,
}
 
const persistedReducer = persistReducer(persistConfig, rootReducer)
 
export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

import { PersistGate } from 'redux-persist/integration/react'
 
// ... normal setup, create store and persistor, import components etc.
 
const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

State Reconciler

hardSet (import hardSet from 'redux-persist/lib/stateReconciler/hardSet')

incoming state: { foo: incomingFoo }
initial state: { foo: initialFoo, bar: initialBar }
reconciled state: { foo: incomingFoo } // note bar has been dropped

autoMergeLevel1 (default)

incoming state: { foo: incomingFoo }
initial state: { foo: initialFoo, bar: initialBar }
reconciled state: { foo: incomingFoo, bar: initialBar } // note incomingFoo overwrites initialFoo

autoMergeLevel2 (import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2')

incoming state: { foo: incomingFoo }
initial state: { foo: initialFoo, bar: initialBar }
reconciled state: { foo: mergedFoo, bar: initialBar } // note: initialFoo and incomingFoo are shallow merged

import hardSet from 'redux-persist/lib/stateReconciler/hardSet'
 
const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: hardSet,
}

Blacklist & Whitelist

// BLACKLIST
const persistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['navigation'] // navigation will not be persisted
};
 
// WHITELIST
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // only navigation will be persisted
};