Question

我正在使用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（）函数来显示文件。

我该如何解决这个问题或以更好的方式对其进行建模？

Answer 1

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，仅显示数据

Flux waitFor（）和异步操作，如何建模。

1 个答案: