这是一个很好的问题。这是我的做法。
我为我的 API 创建了一个模块。我将该模块导入到 actions.js 中,然后将 API 响应发送到我的商店。这是一个示例(使用fluxxor),我的应用程序中带有我的API调用的商店可能看起来像:
# actions.js
var MyAPI = require('./my-api'),
Constants = require('./constants/action-constants');
module.exports = {
doSomeCrazyStuff: function(stuff, userID) {
MyAPI.doSomeCrazyStuff(stuff, userID)
.success(function(resp) {
this.dispatch(Constants.DO_CRAZY_STUFF_SUCCESS, {stuff: resp.stuff});
if (resp.first_stuff_did) {
this.dispatch(Constants.SHOW_WELCOME_MESSAGE, {msg: resp.msg});
}
})
.error(function(e) {
this.dispatch(Constants.DO_CRAZY_STUFF_ERROR, {e: resp.error});
});
}
};
# store.js
var Fluxxor = require('fluxxor'),
ActionConstants = require('./constants/action-constants');
var StuffStore = module.exports = {
Fluxxor.createStore({
initialize: function() {
this._bindActions();
this.stuff = null;
},
_bindActions: function() {
this.bindActions(
ActionConstants.DO_CRAZY_STUFF_SUCCESS, this.handleDoCrazyStuffSuccess
);
},
handleDoCrazyStuffSuccess: function(payload) {
this.stuff = payload.stuff;
this.emit('change');
}
});
}
# stuff-component.js
var React = require('react'),
Fluxxor = require('fluxxor'),
FluxMixin = Fluxxor.FluxMixin(React),
StoreWatchMixin = Fluxxor.storeWatchMixin;
var StuffComponent = module.exports = React.createClass(function() {
mixins: [FluxMixin, StoreWatchMixin("StuffStore")],
getStateFromFlux: function() {
flux = this.getFlux();
var StuffStore = flux.store("StuffStore").getState();
return {
stuff: StuffStore.stuff
}
},
onClick: function() {
this.getFlux().actions.doSomeCrazyStuff();
},
render: function() {
return <div onClick={this.onClick}>{this.state.stuff}</div>
}
});