Like me, and I think many others, I call an action from the view to load the contact. Let me call it LOAD_CONTACT . This will be an asynchronous action. Some people directly bind the API call in the store, but I think the more frequent activity was async in action creators. So, let's say you have the creator of the loadContactAction() action. Then it will first send the LOAD_CONTACT action (in case some store might be interested in it, to display the message “loading” or something else), then select from the API. In the ajax request callback, you call another action creator, for example. loadContactSuccessAction() (or "failed", of course). Then your ContactsStore store registers and responds to LOAD_CONTACT_SUCCESSFUL .
var loadContactAction = function(...) { // maybe do some work dispatch(...); // dispatch your LOAD_CONTACT action makeRequest(...).then(function(contact) { loadContactSuccessAction(contact); // create "success" action }, function(err) { loadContactFailedAction(err); // probably handle this somewhere }); } var ContactsStore = { init(...) { // register in dispatcher here }, onLoadContactSuccess(contact) { this.contacts[contact.id] = contact; // or store your contact some other way this.emitChange(); // trigger a store update change event with whatever event dispatcher you use } } var EditContact = React.createClass({ componentDidMount: function() { ContactsStore.listen(this.onStoreChange); loadContactAction(); // pass in ID or however you want to load it }, onStoreChange: function() { // fetch your contact here }, render: function() { ... } });
source share