zzbozheng

8 个月前
  • 1287

    浏览
  • 0

    评论
  • 0

    收藏

使用PouchDB来实现React离线应用

本文作者: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)
    });
  }
}

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

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。