javascript - Updating two stores from one ajax response -
i'm using react js flux architecture , having trouble resolving issue asyncronous request affects more 1 store. have form store , results store. submitting form component sends off action results store (rather dispatcher registers in results store) fires ajax request external api fetches data based on serialized form info (from results store). response populates results store, initializes results component state. works expected.
issue comes when there errors in form. if there errors (but still 200 response code) make through api sends me error response object. issue is, i'm in results store, , need these errors form store. following flux kata, action required update form store, doesnt seem right fire action store. flux cycle have going
formcomponent --> resultsaction.fetchresults(relaventformdata) --> resultstoredal.fetchresults --> $.ajax.success: if (response.errors){ //update formstore response.errors }
formcomponent gets states formstore (which has error state)
resultscomponent gets state resultsstore
resultsstore gets initialized non-default (empty) data via ajax request resultsstoredal (which private object , in same file resultsstore)
in ajax success, results store updated results returned if there errors, formstore needs updated form errors, since errors not related results.
tl;dr have 2 stores. make ajax request via action , in $.ajax.success, if there not validation errors, update 1 store, if there validation errors update different store. assuming cant use front end validation prevent errors, should branching logic placed, since, far know, calling action store not best practice.
i think it's idea fire action when data received. way store interested in new data gets noticed , can whatever wants it. don't think creating action store bad, here's myself:
i have 2 types of action creators, 1 view actions , 1 server actions. keeping them separately makes things easier maintain, isn't necessary. user submitting form result in view action being created. initialize data fetching , @ same time notify interested stores request has been made.
going example, have this:
var actioncreators = { submitform: function(formdata) { appdispatcher.handleviewaction({ type: actiontypes.submit_form, }); webapi.fetchresults(formdata); }, }; module.exports = actioncreators;
the webapi make ajax request , create appropriate server action in callback (with new data). here's how 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 example again, have formcomponent actioncreators.submitform(formdata);
when user submits form , show loading spinner (or whatever wanna do).
when data has been received action, containing data, created , dispatched (fetch_results_success or fetch_results_error). all stores can decide whether or not want new data.
i'd recommend taking @ facebook's flux chat example.
Comments
Post a Comment