Flux waitFor（）和异步操作，如何建模。 [英] Flux waitFor() and async operation, how to model.

问题描述

我正在将pouchDB用作应用程序的本地数据库。我想从PouchDB查询结果并将其加载到React.js中。但是，即使我正在使用waitFor（）方法，PouchDB查询的结果返回也为时已晚。我认为我不正确理解waitFor（）的用法，也许有人可以对此有所了解。

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.

我有两个商店，即DbStore，它从datbase检索数据。我的react组件使用了这个存储的FileExplorerStore。

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;
});

DbStore具有函数LoadFiles，它将DB文件加载到_files数组中。为了便于说明，我复制了以下代码：

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)
                });
            });

 }, 

FileExplorerStore有一种方法可以从_files数组。然后在FileExplorerStore中，我有一个getFiles（）方法，它将检索这些文件。但是，此数组始终为空，因为将在填充数组之前执行此方法。

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

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（）函数来显示文件。

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?

推荐答案

Facebook团队发布的调度程序中的

waitFor 不是为此而设计的（至少发布于2014年9月11日），只需确保已执行并返回了 dispatchToken （传递给 waitFor ），然后然后它将开始执行下一个已注册的回调。

The waitFor in the dispatcher released by the Facebook team was not designed for that (at least the release on Sep 11, 2014), it just make sure the dispatchToken (which passed to waitFor) was executed and returned, and then it will starts executing the next registered callback.

因此，在您的情况下，这是正确的预期行为。

So in your case this is somehow the correct expected behaviour.

我要做的就是将动作分为两部分。首先是获取，其次是 OPEN_FOLDER ，如 FileExplorerStore 一样。假设名为 DB_FETCH 的DBfetch操作将触发您的数据库，然后将数据放入 _files ，获取成功回调，对 OPEN_FOLDER 触发操作。对于触发点，这取决于您要如何设计，我将执行名为 INIT_OPEN_FOLDER 的第三个操作，该操作将触发DB_FETCH，然后向用户界面，最后从 OPEN_FOLDER 获取发射时，仅显示数据

What i will do is separate the action into two parts. First is fetching, second is OPEN_FOLDER as in FileExplorerStore. Assuming the DBfetch action named DB_FETCH, this will trigger your database and then get the data into _files, in the fetch success callback, trigger an action to the OPEN_FOLDER. For the trigger point, it is depends on you how you want to design it, i would have the third action named INIT_OPEN_FOLDER which trigger the DB_FETCH, then show the loading indicator to the UI, and finally when get the emit from OPEN_FOLDER, only display the data

这篇关于Flux waitFor（）和异步操作，如何建模。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！