Flux waitFor() и операция async, как моделировать.

Question

Я использую 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 будет вызывать GetFiles() функция от FileExplorerStore для отображения файлов.

Как я могу исправить это или смоделировать это лучше?

Answer 1

waitFor в dispatcher выпущенном командой Facebook не был предназначен для этого (по крайней мере, выпуск сен 11, 2014), это просто убедитесь, что dispatchToken (который передается waitFor) был казнен и вернулся, а затем он начнет выполнение следующего зарегистрированного обратного вызова.

Так что в вашем случае это как-то правильно ожидаемое поведение.

Что я буду делать, это разделить действие на две части. Сначала выборка, вторая - OPEN_FOLDER, как в FileExplorerStore. Предполагая, что действие DBfetch с именем DB_FETCH приведет к активации вашей базы данных, а затем получить данные в _files, в обратном вызове с успешной выборкой введите action в OPEN_FOLDER. Для триггерной точки это зависит от вас, как вы хотите ее спроектировать, у меня было бы третье действие с именем INIT_OPEN_FOLDER, которое запускает DB_FETCH, а затем показывает индикатор загрузки для пользовательского интерфейса, и, наконец, при получении испускания от OPEN_FOLDER отображается только отображение данные