Flux: waitFor конкретное событие

Question

Я пытаюсь понять, как разрешать зависимости между магазинами. Проблема в том, что у меня есть полное дерево данных, которое нужно извлекать с сервера с цепочкой запроса, которая зависит друг от друга.

ПРОБЛЕМА:waitFor швов не допускается для асинхронных запросов. Предположим, что следующая цепь событий:

1. NEED_A (посмотреть на StoreA)
2. NEED_B (посмотреть на StoreB) Здесь StoreB сделать AppDispatcher.waitFor([StoreA.dispatchToken]). Но на самом деле мы хотим, чтобы ждать GET_A
3. SOME_OTHER_ACTION (взгляд на StoreA)

Третий шаг ломает waitFor на второй стадии, так как StoreA.dispatchToken был призван SOME_OTHER_ACTION.

Вопрос:Что такое истинный путь ждать какой-то конкретного действия (GET_A)?

Давайте посмотрим на код (пожалуйста, обратите внимание на три PROBLEM комментарии):

StoreA

var a = []; 

var StoreA = assign({}, EventEmitter.prototype, { 

    getAProps:() => copyOfAProps(a); 

    asyncGetA:() => ... //Async request returns Promise 
}); 

StoreA.dispatchToken = AppDispatcher.register((action) => { 

    switch(action.type) { 
    NEED_A: 
     StoreA.asyncGetA().then((data) => {    
     ActionCreator.getA(data); //Dispatches GET_A event 
     }); 
     break; 
    GET_A: 
     a = action.data; 
     StoreA.emitChange(); 
    SOME_OTHER_ACTION: 
     //do whatever 
    } 

}); 

StoreB

var b = []; 

var StoreB = assign({}, EventEmitter.prototype, { 

    // PROBLEM: this request depends on data fetched from StoreA.asyncGetA 
    asyncGetB: (A) => ... 
}); 

StoreB.dispatchToken = AppDispatcher.register((action) => { 

    switch(action.type) { 
    //PROBLEM: NEED_B may happen before GET_A 
    NEED_B: 
     //PROBLEM: As I understand waitFor doesn't work here 
     AppDispatcher.waitFor([StoreA.dispatchToken]); 
     StoreB.asyncGetB(StoreA.getAProps()).then((data) => { 
     ActionCreator.getB(data); 
     }); 
    GET_B: 
     b = action.data; 
     StoreB.emitChange(); 
    } 
}); 

Answer 1

Вот пример от https://github.com/calitek/ReactPatterns React.13/ReFluxWebSocket. App.js запускает действие, действие которого Api.Store действует с помощью ws.api.js. Затем ws.api.js запускает другое действие, на которое реагирует Api.Store. Это пример цепочки действий.

Это Api.Store.js

import Reflux from 'reflux'; 

    import Actions from './Actions'; 
    import ApiFct from './../utils/ws.api.js'; 

    function _apiInit() { ApiFct.init(); } 
    function _apiInitDone() { ApiFct.getData(); } 
    function _apiSetData(data) { ApiFct.setData(data); } 

    var ApiStoreObject = { 
     listenables: Actions, 
     apiInit: _apiInit, 
     apiInitDone: _apiInitDone, 
     apiSetData: _apiSetData 
    } 
    const ApiStore = Reflux.createStore(ApiStoreObject); 
    export default ApiStore; 

Это ws.api.js

import Actions from '../flux/Actions'; 

    module.exports = { 
     socket: {}, 
     init: function() { 
      this.socket = new Primus(); 
      this.socket.on('server:GotData', this.gotData); 
      Actions.apiInitDone(); 
     }, 
     getData: function() { this.socket.send('client:GetData', {}); }, 
     gotData: function(data) { Actions.gotData(data); Actions.gotData2(data); }, 
     setData: function(data) { this.socket.send('client:SetData', data); }, 
    }; 

Это Actions.js

import Reflux from 'reflux'; 

    var apiActions = [ 
     'apiInit', 
     'apiInitDone', 
     'apiSetData' 
    ] 

    var wsActions = [ 
     'gotData', 
     'gotData2' 
    ] 

    var actionArray = wsActions.concat(apiActions); 
    module.exports = Reflux.createActions(actionArray); 

Это app.js

'use strict'; 

    import React from 'react'; 

    import AppCtrl from './components/app.ctrl.js'; 
    import Actions from './flux/Actions'; 
    import ApiStore from './flux/Api.Store'; 

    window.React = React; 

    Actions.apiInit(); 

    React.render(<AppCtrl />, document.getElementById('react'));