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

 更新时间:2019年05月22日 09:01:10   作者:enda  
这篇文章主要介绍了在React-Native中持久化redux数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

效果

参考文档

官方文档

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

相关文章

  • redux工作原理讲解及使用方法

    redux工作原理讲解及使用方法

    这篇文章主要介绍了redux工作原理讲解及使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-11-11
  • 一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()

    一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()

    这篇文章主要介绍了一文搞懂 React 18 中的 useTransition()与useDeferredValue(),文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • React中的 ref 及原理解析

    React中的 ref 及原理解析

    本章深入探讨了React Ref的用法和原理,还介绍了如何使用useImperativeHandle在函数组件中暴露方法,并详细解释了ref的处理逻辑和原理,包括在commit阶段更新ref以及在组件卸载时的处理,感兴趣的朋友一起看看吧
    2025-01-01
  • React如何使用sortablejs实现拖拽排序

    React如何使用sortablejs实现拖拽排序

    这篇文章主要介绍了React如何使用sortablejs实现拖拽排序问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 简析React Native startReactApplication 方法

    简析React Native startReactApplication 方法

    这篇文章主要介绍了React Native startReactApplication 方法简析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • React 如何向url中添加参数

    React 如何向url中添加参数

    这篇文章主要介绍了React 如何向url中添加参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • ReactJs设置css样式的方法

    ReactJs设置css样式的方法

    本篇文章主要介绍了ReactJs设置css样式的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    这篇文章主要介绍了基于react hooks,zarm组件库配置开发h5表单页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • ReactJS应用程序中设置Axios拦截器方法demo

    ReactJS应用程序中设置Axios拦截器方法demo

    这篇文章主要为大家介绍了ReactJS应用程序中设置Axios拦截器方法demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React中props使用教程

    React中props使用教程

    props是组件(包括函数组件和class组件)间的内置属性,用其可以传递数据给子节点,props用来传递参数。组件实例化过程中,你可以向其中传递一个参数,这个参数会在实例化过程中被引用
    2022-09-09

最新评论