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