我正在使用pouchDB作为应用程序的本地数据库。我想从PouchDB查询结果并将其加载到React.js中。但是,即使我使用waitFor()方法,PouchDB查询的结果也会返回太晚。我想我不明白waitFor()的使用是否正确,也许有人可以对它有所了解。
我有两个商店,DbStore从数据库中检索数据。 FileExplorerStore这个商店由我的react组件使用。
DbStore.dispatchToken = AppDispatcher.register(function (payload) {
var action = payload.action;
var folder = payload.action.folder
switch (action.type) {
case 'OPEN_FOLDER':
if (folder === 'start') {
DbStore.init();
}
else {
DbStore.createPath(folder);
}
DbStore.emitChange();
break;
default:
// do nothing
}
return true;
});
DbStore有一个函数LoadFiles,它将DB文件加载到_files数组中。为了便于说明,我复制了以下代码:
loadFiles: function (_path) {
var fileNames = fs.readdirSync(_path);
_files = [];
fileNames.forEach(function (file) {
console.log(file)
db.query(function (doc) {
emit(doc.name);
}, {key: "bower.json"}).then(function (res) {
_files.push(res.rows[0].key)
});
});
},
FileExplorerStore有一个从_files数组中检索文件的方法。然后在FileExplorerStore中我有一个getFiles()方法,它将检索这些文件。但是,此数组始终为空,因为此方法将在填充数组之前执行。
FileExplorerStore
FileExplorerStore.dispatchToken = AppDispatcher.register(function (payload) {
var action = payload.action;
switch (action.type) {
case 'OPEN_FOLDER':
AppDispatcher.waitFor([DbStore.dispatchToken]);
FileExplorerStore.emitChange();
break;
default:
// do nothing
}
return true;
});
在react.js中,getInitialState函数将从FileExplorerStore调用getFiles()函数来显示文件。
我该如何解决这个问题或以更好的方式对其进行建模?
答案 0 :(得分:9)
Facebook团队发布的waitFor
dispatcher
并非专为此设计(至少2014年9月11日发布),只是确保dispatchToken
(传递给waitFor
)已执行并返回,然后它将开始执行下一个已注册的回调。
所以在你的情况下,这是某种正确的预期行为。
我将做的是将行动分为两部分。第一个是提取,第二个是OPEN_FOLDER
,如FileExplorerStore
。假设DBfetch操作名为DB_FETCH
,这将触发您的数据库,然后将数据导入_files
,在获取成功回调中,触发action
到OPEN_FOLDER
。对于触发点,它取决于你想要如何设计它,我将有第三个动作名为INIT_OPEN_FOLDER
,它触发DB_FETCH,然后显示加载指示器到UI,最后从获取发射时OPEN_FOLDER
,仅显示数据