Flux waitFor() e operazione asincrona, come modellare.

Question

Sto utilizzando pouchDB come database locale per un'app. Voglio interrogare i risultati di PouchDB e caricarli in React.js. Tuttavia, anche se sto usando il metodo waitFor(), i risultati della query PouchDB ritornano troppo tardi. Penso di non capire l'uso di waitFor() corretto, forse qualcuno può far luce su di esso.

Ho due negozi, il DbStore che recupera i dati dal database. E FileExplorerStore questo negozio è usato dai miei componenti di reazione.

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 ha una funzione LoadFiles che carica i file DB nell'array _files. A scopo illustrativo Ho copiato il codice qui sotto:

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

}, 

Il FileExplorerStore aveva un metodo per recuperare i file dalla matrice _files. Quindi in FileExplorerStore ho un metodo getFiles(), che recupererà questi file. Tuttavia, questo array è sempre vuoto poiché questo metodo verrà eseguito prima che l'array venga riempito.

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

Nel react.js la funzione getInitialState chiamerà i GetFiles funzione() dal FileExplorerStore per visualizzare i file.

Come posso risolvere questo o modellare questo in un modo migliore?

Answer 1

Il waitFor nel dispatcher rilasciato dal team di Facebook non è stato progettato per che (almeno il rilascio il set 11, 2014), semplicemente assicurarsi che il dispatchToken (che passò alla waitFor) è stato eseguito ed è tornato, e poi inizierà l'esecuzione della successiva callback registrata.

Quindi nel tuo caso questo è in qualche modo il comportamento corretto previsto.

Quello che farò è separare l'azione in due parti. Il primo è il recupero, il secondo è OPEN_FOLDER come in FileExplorerStore. Supponendo l'azione DBfetch denominata DB_FETCH, questo attiverà il tuo database e quindi prenderà i dati in _files, nella richiamata per il recupero del recupero, innescare un action su OPEN_FOLDER. Per il punto di attivazione, dipende da te come lo vuoi progettare, avrei la terza azione denominata INIT_OPEN_FOLDER che attiva il DB_FETCH, quindi mostra l'indicatore di caricamento sull'interfaccia utente e infine quando viene emesso da OPEN_FOLDER, visualizza solo i dati