富贵资源网 Design By www.hznty.com
在最近的一个项目中,要求对 redux 数据做持久化处理,经过研究后成功实现,在此记录一下过程
我们可以使用 redux-persist 对数据做持久化处理
安装
npm i --save redux-persist
使用
安装成功后,我们需要对 store 代码进行修改,这是我的 store 生成文件
import {applyMiddleware, createStore, compose} from 'redux'; import {createLogger} from 'redux-logger'; import thunk from 'redux-thunk'; import reducers from '../reducers'; import {persistStore, persistReducer} from 'redux-persist'; import storage from 'redux-persist/lib/storage' const persistConfig = { key: 'milk', # 对于数据 key 的定义 storage, # 选择的存储引擎 } # 对 reducers 的封装处理 const persistedReducer = persistReducer(persistConfig, reducers) let loggerMiddleware = createLogger(); export default function configureStore() { const enhancers = compose( applyMiddleware(thunk, loggerMiddleware), ); # 处理后的 reducers 需要作为参数传递在 createStore 中 const store = createStore(persistedReducer, enhancers) # 持久化 store let persistor = persistStore(store) return {store, persistor} }
在 react-native 中,存储引擎默认为 AsyncStorage
Android是以key=>value的形式存储在本地sqlite中
iOS 是直接存沙盒文件
其中还有很多可以配置的地方,大家自行参考官方文档
修改完生成 store 代码后,在入口文件做一次修改,需要引入 PersistGate 来进行二次的组装
import React, {Component} from 'react'; import {Provider} from 'react-redux'; import HomeContainer from './container/HomeContainer' import configureStore from './redux/store' import {PersistGate} from 'redux-persist/integration/react' # 看这里 const {store, persistor} = configureStore(); class App extends Component { render() { return ( <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <HomeContainer/> </PersistGate> </Provider> ); } } export default App
简单配置即可,我们可以看一下效果
效果
参考文档
官方文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...