使用PouchDB来实现React离线应用

IMWeb前端团队

发布于 2019-12-05 13:10:32

1K0

发布于 2019-12-05 13:10:32

文章被收录于专栏：IMWeb前端团队IMWeb前端团队

本文作者：IMWeb zzbozheng 原文出处：IMWeb社区 未经同意，禁止转载

最近听到有同学在讨论关于数据上传遇到离线的问题，因此在这里介绍一下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)
    });
  }
}

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016-09-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

react