In the flux architecture, who is responsible for s

Question

So in the flux architecture, data flows as follows:

View -> Action -> Dispatcher -> Store
 ^ <-----------------------------|

So let's say the view is a comment box. When the user submits a comment, an addComment action is triggered, but where should that comment be sent to the server? Should it happen in the action function, before dispatching it, or should the store doing it when receiving the action from the dispatcher?

Both cases seam like a violation of the single responsibility pattern. Or should there be two CommentStores, one LocalCommentStore and a ServerCommentStore that both handle the addComment action?

Answer 1

In your case Action is responsible for both sending a pending action or optimistic update to the store and sending a call to the WebAPI:

View -> Action -> Pending Action or optimistic update  -> Dispatcher -> Store -> emitEvent -> View 
               -> WebUtils.callAPI()

onWebAPISuccess -> Dispatcher -> Store -> emitEvent -> View
onWebAPIFail -> Dispatcher -> Store -> emitEvent -> View

Answer 2

This is a great question. Here is how I do it.

I create a module for my API. I import that module in actions.js, then dispatch the API responses to my store. Here is an example (uses fluxxor) of what the store with my API calls in my application may look like:

# 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>
    }
});