Updating two stores from one ajax response

Question

I'm using react js with the flux architecture and having trouble resolving an issue with an asyncronous request that affects more than one store. I have a form store and a results store. submitting the form component sends off an action to the results store (rather the dispatcher that registers in the results store) that fires an ajax request to an external api which fetches data based on the serialized form info (from my results store). this response populates the results store, which effectively initializes the results component state. This all works as expected.
the issue comes when there are errors in the form. If there are errors (but still 200 response code) that make it through the api sends me an error response object. the issue is, i'm in my results store, and need to get these errors to the form store. following the flux kata, an action is required to update the form store, but it doesnt seem right to fire an action from a store. This is the flux cycle i have going

FormComponent -->  
ResultsAction.fetchResults(relaventFormData) -->  
ResultStoreDAL.fetchResults -->  
$.ajax.success: if (response.errors){ 
  //update the FormStore with response.errors
}

FormComponent gets states from FormStore (which has an error state)
ResultsComponent gets state from ResultsStore
ResultsStore gets initialized with non-default (empty) data via an ajax request from the ResultsStoreDAL (which is a private object and in the same file as ResultsStore)
In the ajax success, the Results store is updated with results returned if there are errors, the FormStore needs to be updated with the form errors, since errors are not related to results.

TL;DR I have two stores. I make an ajax request via an action and in an $.ajax.success, if there are not validation errors, i update one store, if there are validation errors i update a different store. assuming i cant use front end validation to prevent errors, where should this branching logic be placed, since, as far as i know, calling an action from a store is not the best practice.

Answer 1

I think it's a good idea to fire an action when the data is received. That way any store interested in the new data gets noticed and can do whatever it wants with it. I don't think creating the action from the store would be that bad, but here's what I usually do myself:

I have two types of action creators, one for view actions and one for server actions. Keeping them separately makes things easier to maintain, but isn't really necessary. A user submitting a form would result in a view action being created. This would initialize the data fetching and at the same time notify any interested stores that some request has been made.

Going back to your example, you could have this:

var ActionCreators = {
    submitForm: function(formData) {
        AppDispatcher.handleViewAction({
            type: ActionTypes.SUBMIT_FORM,
        });

        WebAPI.fetchResults(formData);
    },
};

module.exports = ActionCreators;

The WebAPI would make an ajax request and then create an appropriate server action in its callback (with the new data). Here's how it could look using jQuery:

// WebAPI.js
module.exports = {
    fetchResults: function(formData) {
        $.ajax({
            url: url,
            data: formData,
            success: function(response) {
                if (response.success)
                    ServerActionCreators.fetchResultSuccess(response);
                else
                    ServerActionCreators.fetchResultError(response);
            }
        });
    }
};

// ServerActionCreators.js
var ServerActionCreators = {
    fetchResultSuccess: function(response) {
        AppDispatcher.handleServerAction({
            type: ActionTypes.FETCH_RESULTS_SUCCESS,
            response: response
        });
    },

    fetchResultError: function(response) {
        AppDispatcher.handleServerAction({
            type: ActionTypes.FETCH_RESULTS_ERROR,
            response: response
        });
    },
};

module.exports = ServerActionCreators;

Going back to your example again, you could have your FormComponent do ActionCreators.submitForm(formData); when the user submits the form and then show a loading spinner (or whatever you wanna do).

When the data has been received an action, containing the data, will be created and dispatched (FETCH_RESULTS_SUCCESS or FETCH_RESULTS_ERROR). Now all stores can decide whether or not they want to do anything with the new data.

I'd also recommend taking a look at Facebook's Flux Chat Example.