Flux waitFor() 和异步操作，如何建模。

Question

我正在使用 pouchDB 作为应用程序的本地数据库。我想从 PouchDB 查询结果并将其加载到 React.js。但是，即使我使用 waitFor() 方法，PouchDB 查询的结果 return 也来不及了。我想我不理解 waitFor() 的正确用法，也许有人可以阐明它。

我有两个商店，DbStore 从数据库中检索数据。而 FileExplorerStore 这个商店被我的反应组件使用。

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，可以将数据库文件加载到 _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 团队发布的 dispatcher 中的 waitFor 并不是为此设计的（至少在 2014 年 9 月 11 日发布），它只是确保 dispatchToken (传递给waitFor)被执行并返回，然后它会开始执行下一个注册的回调。

因此，在您的情况下，这在某种程度上是正确的预期行为。

我要做的是将动作分成两部分。首先是获取，其次是 OPEN_FOLDER，如 FileExplorerStore。假设名为 DB_FETCH 的 DBfetch 操作将触发您的数据库，然后将数据获取到 _files，在获取成功回调中，触发一个 action 到 OPEN_FOLDER。对于触发点，这取决于你想如何设计它，我将第三个动作命名为 INIT_OPEN_FOLDER 触发 DB_FETCH，然后将加载指示器显示给 UI ，最后当从 OPEN_FOLDER 获取发射时，只显示数据

Flux waitFor() 和异步操作，如何建模。

Flux waitFor() and async operation, how to model.

reactjs

pouchdb

reactjs-flux