在最近的一个项目中，要求对 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

简单配置即可，我们可以看一下效果

效果

参考文档

官方文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。