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

2024-04-24

我使用 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,它将把数据库文件加载到 _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.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()函数来显示文件。

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


The waitFor in the dispatcherFacebook 团队发布的版本并不是为此而设计的(至少是 2014 年 9 月 11 日发布的),它只是确保dispatchToken(传递给waitFor) 被执行并返回,然后开始执行下一个注册的回调。

所以在你的情况下,这在某种程度上是正确的预期行为。

我要做的就是将动作分成两部分。第一个是获取,第二个是OPEN_FOLDER as in FileExplorerStore。假设 DBfetch 操作名为DB_FETCH,这将触发您的数据库,然后将数据存入_files,在获取成功回调中,触发action to the OPEN_FOLDER。对于触发点,这取决于你想如何设计它,我将第三个动作命名为INIT_OPEN_FOLDER触发 DB_FETCH,然后向 UI 显示加载指示器,最后当从OPEN_FOLDER, 只显示数据

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flux waitFor() 和异步操作,如何建模。 的相关文章

随机推荐