相思资源网 Design By www.200059.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

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

效果

详解在React-Native中持久化redux数据

参考文档

官方文档

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

标签:
React-Native持久化redux数据,redux,数据持久化

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“详解在React-Native中持久化redux数据”

暂无详解在React-Native中持久化redux数据的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。