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

相关文章

来自专栏数据和云

当Java虚拟机遇上Linux Arena内存池

作者简介 刘韬,云和恩墨中间件服务交付团队专家 Java开发出身,10年WebLogic相关开发、运维工作经验,熟悉SOA、现代业务系统架构中各层组件,尤其擅长...

4677
来自专栏我是攻城师

2015年240个数据库引擎排名参考

38710
来自专栏数据和云

关于 Oracle 存储双活配置和实战

作者简介 ? 任小闯 云和恩墨交付技术顾问,6年以上数据库开发维护工作经历,Oracle 10g OCM,Oracle 11g OCP,曾就职于某互联网行业任数...

3088
来自专栏Python中文社区

开源项目Trip: 给Requests加上协程

專 欄 ❈LittleCoder,维护微信个人号python接口:http://itchat.readthedocs.io狂热bbt粉丝,业余写玩具。 Git...

2048
来自专栏数据和云

Oracle并发(CONCURREMT)收集统计信息

编辑手记:从11.2开始,可以通过CONCURRENT参数,启用表或分区的并行扫描,加快统计信息的收集速度。 作者简介:何剑敏 Oracle ACS华南区售后...

3155
来自专栏WindCoder

简化软件集成:一个Apache Camel教程

本周收到的是一篇关于使用Apache Camel整合企业中各种软件的教程,涉及到从基础到Kubernetes集成。推荐直接看原文:

571
来自专栏PingCAP的专栏

TiDB 1.1 Beta Release

2018 年 2 月 24 日,TiDB 发布 1.1 Beta 版。该版本在 1.1 Alpha 版的基础上,对 MySQL 兼容性、系统稳定性做了很多改进。

2686
来自专栏程序人生

撰写合格的REST API

两周前因为公司一次裁人,好几个人的活都被按在了我头上,这其中的一大部分是一系列REST API,撰写者号称基本完成,我测试了一下,发现尽管从功能的角度来说,这些...

3165
来自专栏社区的朋友们

TAF 必修课(一):整体架构理解

最近看了很多文章和分享,非常受益, 实习所做项目主要用到了TAF,有必要对之前的学习做个梳理和总结,必修亦为基础、通用之意,故取其名。

1.8K0
来自专栏张善友的专栏

使用C# 和Consul进行分布式系统协调

随着大数据时代的到来,分布式是解决大数据问题的一个主要手段,随着越来越多的分布式的服务,如何在分布式的系统中对这些服务做协调变成了一个很棘手的问题。今天我们就来...

2795

扫码关注云+社区