使用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 条评论
登录 后参与评论

相关文章

来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5228
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

5567
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7066
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

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

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2752
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4385
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

38410
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3655
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3278
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7

扫码关注云+社区