redux之redux-persist数据持久化

原因：redux和其它状态管理技术一样，刷新页面后，数据就会恢复成初始状态。

所以：redux-persist会将redux的store中的数据自动缓存到浏览器的 localStorage 中，不再需要单独去存储了

仓库地址： https://github.com/rt2zz/redux-persisthttps://github.com/rt2zz/redux-persist1，安装依赖 

npm i redux-persist

2,在store.js中配置

import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认在localStorage

// 配置持久化
const persistConfig = {
    key: 'root',
    storage,
    whitelist:['switchCity'] ///设置某个reducer数据持久化，
    // blacklist:[]  //设置某个reducer数据不持久化，
  }

const persistedReducer = persistReducer(persistConfig, reducers)

// applyMiddleware添加一个中间件
let store = createStore(persistedReducer,applyMiddleware(reduxThunk,reduxPromise))
let persistor = persistStore(store)
export {store,persistor} 

在根目录index.js中

import { store,persistor } from './pages/cinema_react_redux/redux/store'

import { PersistGate } from 'redux-persist/integration/react'

  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>

运行效果图