react native 中使用 redux-persist

为什么要用 redux-persist

redux-persist是一个持久化存储state的插件，那么为什么要用它呢？持久化对于前端开发有什么好处？
2个问题可以一起回答：
redux的store状态树保存的state并不是持久保存的，state只是一个内存机制，而我们知道，本地数据库或者像localstorage之类的缓存系统才有可能长时间保存数据，而redux-persist可以让你的数据从state分离出来，保存到浏览器缓存中，以便实现数据的持久化缓存。
既然如此，那么我们手动保存到浏览器缓存就行了，不是吗？首先可以肯定的是，手动保存是可以的，也就是一个简单的setSessionStorage就能搞定，那么redux-persist做了什么呢？它并没有将所有state都保存到了缓存，而是保留了redux的store，在store里面保存了一个个的key，这些key对应了缓存里面的一个个持久化数据。
不是所有数据都需要持久化存储，因为很多数据都要保持跟后端的同步更新，那么当你遇到需要持久化保存的数据的时候，就可以使用这个插件来完成你的任务了。

需要安装的依赖

redux-persist

store.js

在这里，默认使用 redux 来管理数据

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducers from './reducers'
import { AsyncStorage } from 'react-native'
import { persistStore, persistReducer } from 'redux-persist'
// import { persistStore, autoRehydrate } from 'redux-persist-immutable'
​
const persistConfig = {
 key: 'milk', // 对于数据 key 的定义
 storage: AsyncStorage,  // 选择的存储引擎
}
​
// 对 reducers 的封装处理
const persistedReducer = persistReducer(persistConfig, reducers)
​
export default () => {
 // 处理后的 reducers 需要作为参数传递在 createStore 中
 const store = createStore(persistedReducer, applyMiddleware(thunk))
 // 持久化 store
 let persistor = persistStore(store)
 return { store, persistor }
}

App.js(入口文件)

import { Provider } from 'react-redux'
import configureStore from './redux/store'
import Main from './Main'
import { PersistGate } from 'redux-persist/integration/react'
​
​
const { store, persistor } = configureStore();
export default class App extends PureComponent {
 render() {
   return (
     <Provider store={store}>
       <PersistGate
         loading={null}
         persistor={persistor}
       >
         <Main />
       </PersistGate>
     </Provider>
  )
}
}

如此，便完成了简单的配置，程序可以成功运行，如果有更复杂的需求，可以参考 github 或相关教程