使用PouchDB来实现React离线应用

最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB。

PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来打造浏览器的离线应用。

如果你要使用PouchDB,那么建议你的远程数据库使用CouchDB,那样的话可以更好地协调起来。

建立数据库

const localDB = new PouchDB('docs');  
const remoteDB = new PouchDB('http://localhost:5984/docs');

同步本地数据到远程数据库

PouchDB API 提供了方法可以让你备份本地数据到服务器: sync。

live: true表示如果数据一发生变更,就立即同步到远程服务器。

retry: true表示如果在离线状态下导致同步失败之后,会自动重新尝试重连,直到连接建立成功为止。该选项在live:true时生效。代码如下:

const sync = localDB.sync(remoteDB, {  
  live: true,
  retry: true
});

更多关于sync方法的操作,可以参考文档: PouchDB Sync

添加数据

onDocSubmit(doc) {  
  localDB.put({_id: doc, content: doc, imageUrl: imageUrl})
    .catch(console.log.bind(console, 'Error inserting'));
}

更新数据

先查询,再更新,PouchDB的增删查改操作都是异步的,即使操作本地数据库也是异步。

localDB.get('doc1').then(doc => 
    db.put({
        _id: 'doc1',
        _rev: doc._rev,
        title: 'zzbo'
    })
).then(result =>
    // handle result
).catch(err => console.log(err));

删除数据

先查询,再删除

localDB.get('doc1').then(doc =>
  db.remove(doc)
).then(result =>
    // handle result
).catch(err => console.log(err));

监听数据的变更

当数据库的数据发生增删改时,我们需要通知React来更新UI,那么结合React:

class DocsApp extends Component {  
  componentDidMount {
    localDB.changes({
      live: true,
      include_docs: true //Include all fields in the doc field
    }).on('change', this.handleChange.bind(this))
  }

  handleChange(change) {
    var doc = change.doc;

    if (!doc) {
      return;
    }

    if (doc._deleted) {
      this.removeDoc(doc);
    } else {
      this.addDoc(doc);
    }
  }

  addDoc(newDoc) {
    if (!_.find(this.state.docs, '_id', newDoc._id)) {
      this.setState({
        docs: this.state.docs.concat(newDoc)
      });
    }
  }

  removeDoc(oldDoc) {
    this.setState({
      docs: this.state.docs.filter(doc => doc._id !== oldDoc._id)
    });
  }
}

当用户使用移动网络时,网络环境往往会变得非常复杂,在离线状态时也能让用户得到好的用户体验是一个重要的课题。 全文完

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

ABAP的Package interface, 安卓的manifest.xml和Kubernetes的Capabilities

事务码SE21创建ABAP包接口。这是ABAP基于包层面的访问控制实现逻辑。包里可以存储很多ABAP对象。如果开发人员想将某些对象声明为包外程序也能访问,可以将...

994
来自专栏更流畅、简洁的软件开发方式

数据访问函数库的使用方法(二)—— 获取记录集和使用事务的方法

使用SQL语句来获取记录集的方法 string sql = "select col1,col2,col3  from TableName where "; ...

17910
来自专栏Fundebug

10种JavaScript开发者必备的VS Code插件

毫无疑问Visual Studio Code是最流量的轻量级代码编辑器。它确实从其它代码编辑器吸收了大量的概念,特别是Sublime Text和Atom。不过,...

884
来自专栏美团技术团队

美团点评数据库中间件DBProxy开源

介绍 随着数据量的不断增大,传统的直连数据库对数据进行访问的方式已经无法满足一般公司的需求。通过数据库中间件,可以对数据库进行水平扩展,由原来单台数据库扩展到...

4285
来自专栏程序员宝库

教你在不使用框架的情况下也能写出现代化 PHP 代码

我为你们准备了一个富有挑战性的事情。接下来你们将以无框架的方式开启一个项目之旅。 首先声明, 这篇并非又臭又长的反框架裹脚布文章。也不是推销非原创(https:...

3015
来自专栏GIS讲堂

通过Ajax的方式执行GP服务

在上一篇文章(Arcgis for js之GP实现缓冲区计算)介绍了Arcgis for js实现缓冲区计算,但是很多时候,我们不会用Arcgis的东西却想调用...

722
来自专栏一个会写诗的程序员的博客

java日志commons-logging/log4j/slf4j/logBack需要知道的几件事

如果对于commons-loging、log4j、slf4j、LogBack等都已经非常清楚了,可以忽略本文。几次解决日志冲突问题时对这几个概念的简单总结,希望...

734
来自专栏向治洪

Android App瘦身实战

随着业务的快速迭代增长,不断引入新的业务逻辑代码、图片资源和第三方SDK等,很多app都面临一个一个结果,app越来越大,甚至很多无用的代码,包体积的增大带来了...

2828
来自专栏假装我会写代码

两个非常棒的 Laravel 权限管理包推荐

2573
来自专栏破晓之歌

Vue+element图片上传 原

采用比较笨的js解决方法,将bolb文件打开,读取src属性(这是一个base64的数据流),把src的内容一起发送给后端。

1013

扫码关注云+社区