I'm using pouchDB as a local database for an app. I want to query the results from PouchDB and load this into React.js. However, even though I'm using the waitFor() method the results of PouchDB query return too late. I think I don't understand the use of waitFor() correct, maybe someone can shed a light on it.
I have two stores, the DbStore that retrieves data from the datbase. And the FileExplorerStore this store is used by my react components.
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;
});
The DbStore has a function LoadFiles that will load the DB files into the _files array. For illustrative purposes I've copied the code below:
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)
});
});
},
The FileExplorerStore had a method to retrieve the files from the _files array. Then in the FileExplorerStore I have a getFiles() method, that will retrieve these files. However, this array is always empty because this method will be executed before the array is filled.
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;
});
In react.js the getInitialState function will call the getFiles() function from the FileExplorerStore to display the files.
How can I fix this or model this in a better way?
