Flux dispatcher issues

gistfile1.js

// Scenario:
// Compnonent BAR requests data from the server via an action `REQ_BAR`
// Component FOO receives data from a previous request `REQ_FOO_SUCCESS`
// --- Cannot dispatch in the middle of a dispatch. --- error is triggered
// `WaitFor` doesn't seem right, since the stores for these two components aren't related e.g:
//   The store used for component FOO does not need any data from the store used for component BAR

// ActionsCreators
// ===================
var ActionCreators = {
  requestFooDetails () {
    AppDispatcher.dispatch({ type: ActionTypes.REQ_FOO });
    FooApi.requestDetails();
  },
  
  requestFooDetailsSuccess () {
    AppDispatcher.dispatch({ type: ActionTypes.REQ_FOO_SUCCESS });
  },
  
  requestBarDetails () {
    AppDispatcher.dispatch({ type: ActionTypes.REQ_BAR });
  }
};
 
// FooApi.js
//=================
var FooApi = {
  requestDetails () {
    getDetails().
      onSuccess(function (res) {
        ActionCreators.requestFooDetailsSuccess(res)
      })
  }
}
 
 
// Components
// ============
var Bar = React.createClass({
    componentDidMount () {
      ActionCreators.requestBarDetails();
    }
});

var Foo = React.createClass({
    componentDidMount () {
      ActionCreators.requestFooDetails();
    },
    
    _onChange () {
      this.setState(getStateFromStores())
    },
    
    render () {
      return (
        {this.state.response && <Bar /> }
      )
    }
});

// When `Bar` is loaded it  dispatches `ActionTypes.REQ_BAR`
// But the Dipatcher is also dispatching `ActionTypes.REQ_FOO_SUCCESS`
// $Dispatcher_pendingPayload === ActionTypes.REQ_FOO_SUCCESS
// Which causes a Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.