Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flux dispatcher issues
// 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment