2015-01-05 1 views
7

저는 app의 로컬 데이터베이스로 pouchDB를 사용하고 있습니다. PouchDB에서 결과를 쿼리하고이를 React.js에로드하려고합니다. 그러나 waitFor() 메서드를 사용하고 있지만 PouchDB 쿼리 결과가 너무 늦게 반환됩니다. 나는 waitFor() 올바른 사용을 이해하지 않는다고 생각한다. 어쩌면 누군가가 그것에 대해 밝힐 수있다.Flux waitFor() 및 비동기 작업, 모델 작성 방법.

두 개의 저장소 인 datbase에서 데이터를 검색하는 DbStore가 있습니다. 그리고이 저장소는 내 반응 구성 요소에 의해 사용됩니다.

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에는 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.

이 문제를 어떻게 해결할 수 있습니까? 페이스 북의 팀에 의해 발표 dispatcher에서

답변

9

waitFor은 SEP ((11), 2014 년 출시 적어도), 그냥 확인이를 위해 설계되지 않은 dispatchToken (waitFor에 전달하는) 실행 및 반환, 다음되었다 다음에 등록 된 콜백을 실행하기 시작합니다.

귀하의 경우에는 이것이 어떻게 든 올바른 예상되는 동작입니다.

내가해야 할 일은 두 부분으로 나누는 것입니다. 첫 번째는 가져 오는 중, 두 번째는 FileExplorerStore과 같이 OPEN_FOLDER입니다. DB_FETCH이라는 DBfetch 작업을 수행하면 데이터베이스가 트리거 된 다음 _files으로 데이터를 가져오고 성공 콜백 반입에서는 actionOPEN_FOLDER으로 트리거합니다. 방아쇠 지점에 대한 그것은 당신이 어떻게 설계하고, 당신은 DB_FETCH 방아쇠를 누른 다음 로딩 표시기를 UI에 표시 INIT_OPEN_FOLDER라는 세 번째 작업을했을 것이라고, 그리고 마지막으로 OPEN_FOLDER에서 방출을 얻을 표시에만 의존 데이터

+0

고마워요. 당신의 설명이 이것을 모델로 만드는 올바른 방법 인 것 같습니다. 또한 #reactjs IRC를 확인하고 비동기 가져 오기 콜백에서 작업을 호출하는 조언을 제공합니다. 그러나 Reflux에서는 Database API를 Actions에서 호출 할 수 있었고 데이터를 가져온 후에 다음 액션을 실행했기 때문에 Reflux로 변경되었습니다. – swennemen

+0

@ChinKang 여기를 보시겠습니까? pls http://stackoverflow.com/questions/32537568/flux-waitfor-specific-event –