这篇文章主要为大家展示了“在React-Native中如何持久化redux数据”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“在React-Native中如何持久化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简单配置即可，我们可以看一下效果
效果
以上是“在React-Native中如何持久化redux数据”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
