redux持久化

1.下载redux-persist结合react-redux使用

基本用法
基本用法包括将persistReducer和persistStore添加到设置中。每个应用都需要决定它们想要“合并”的状态级别。默认为1级。请阅读状态协调器文档以获得更多信息。

// 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 }
}

如果正在使用react，请使用PersistGate包装根组件。这将延迟应用程序UI的呈现，直到您的持久状态被检索并保存到redux。注意PersistGate加载道具可以为空，也可以为任何react实例，例如loading={< loading />}

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>
  );
};

白名单

const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['navigation'] // 只有导航将被持久化
};

whitellist填写想要持久化的reducer分支