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

Posted 2023-02-22

【中文标题】Flux waitFor() 和异步操作，如何建模。

【英文标题】：Flux waitFor() and async operation, how to model.

【发布时间】：2015-03-03 08:55:47

【问题描述】：

我正在使用 pouchDB 作为应用程序的本地数据库。我想从 PouchDB 查询结果并将其加载到 React.js 中。但是，即使我使用 waitFor() 方法，PouchDB 查询的结果返回也太晚了。我想我不明白 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，它将把 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() 函数来显示文件。

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

【参考方案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 显示加载指示器，最后从 @987654333 获取发射@，只显示数据

【讨论】：

谢谢。看来您的解释是对此建模的正确方法。我还检查了#reactjs IRC，他们还建议在我的异步获取回调中调用一个操作。但是我确实改为了 Reflux，因为在 Reflux 中我可以从 Actions 调用我的数据库 API，并在获取数据后执行下一个操作。

@ChinKang 请看这里***.com/questions/32537568/…