Flux waitFor() und asynchrone Operation, wie zu modellieren.

Question

Ich verwende PouchDB als lokale Datenbank für eine App. Ich möchte die Ergebnisse von PouchDB abfragen und diese in React.js laden. Obwohl ich die waitFor() -Methode verwende, kehren die Ergebnisse der PouchDB-Abfrage jedoch zu spät zurück. Ich denke, ich verstehe den Einsatz von waitFor() nicht richtig, vielleicht kann jemand Licht darauf werfen.

Ich habe zwei Speicher, der DbStore, der Daten aus der Datenbank abruft. Und der FileExplorerStore dieses Speichers wird von meinen react-Komponenten verwendet.

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

Die DbStore hat eine Funktion, die die LoadFiles DB-Dateien in das _files Array geladen wird. Zum Zweck der Veranschaulichung habe ich den Code unten kopiert:

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

}, 

Die FileExplorerStor ein Verfahren hatte die Dateien aus dem _files Array abzuzurufen. Dann habe ich im FileExplorerStore eine getFiles() -Methode, die diese Dateien abruft. Dieses Array ist jedoch immer leer, da diese Methode ausgeführt wird, bevor das Array gefüllt wird.

FileExplorerStor

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

In react.js die getInitialState Funktion werden die GetFiles() Funktion aus dem FileExplorerStor aufrufen, um die Dateien anzuzeigen.

Wie kann ich das beheben oder besser modellieren?

Answer 1

Die waitFor im dispatcher von dem Facebook-Team freigegeben wurde nicht konzipiert (zumindest die Veröffentlichung am 11. September 2014), ist es nur sicherstellen, dass die dispatchToken (die waitFor bestand) wurde ausgeführt und zurück, und dann Es beginnt mit der Ausführung des nächsten registrierten Rückrufs.

Also in Ihrem Fall ist dies irgendwie das richtige erwartete Verhalten.

Was ich tun werde, ist die Aktion in zwei Teile zu trennen. Zuerst wird geholt, zweitens ist OPEN_FOLDER wie in FileExplorerStore. Unter der Annahme, dass die DBfetch-Aktion DB_FETCH heißt, löst dies Ihre Datenbank aus und ruft dann die Daten in _files ab. Rufen Sie im Rückruf Rückruf abrufen eine action an die OPEN_FOLDER. Für den Triggerpunkt ist es abhängig von Ihnen, wie Sie es entwerfen möchten, würde ich die dritte Aktion namens INIT_OPEN_FOLDER haben, die DB_FETCH auslösen, dann zeigen die Ladeanzeige auf der Benutzeroberfläche, und schließlich, wenn die Ausgabe von OPEN_FOLDER, nur anzeigen die Daten