reactjs - Where should HTTP requests be initiated in Flux? -

there plenty of discussion on how communicate external services in flux.

it pretty clear basic workflow fire http request, dispatch successful or failure action based on response. can optionally dispatch "in progress" action before making request.

but if request's parameters depend on store's state? nobody seems mention it.

so essentially, based on user interaction view, action dispatched. store owns logic on how transition current state0 next state1 given action. data state1 needed form new http request.

for example, user chooses new filter on page, , store decides reset pagination. should lead new http request (new filter value, first page), not (new filter value, current page state0).

view can not make http call right user's interaction because have duplicate store's logic transition next state.

view can not make http call in store's onchange handler because @ point no longer known origin of state change.

it looks viable option make store fire http request in action handler, after transitioned next state. make action implicitly initiating http call, disables neat possibility have replayable log of dispatched actions debugging.

where should http requests initiated in flux?

let's start @ bottom:

it looks viable option make store fire http request in action handler, after transitioned next state. make action implicitly initiating http call, disables neat possibility have replayable log of dispatched actions debugging.

this can mitigated not initiating http requests if you're in debugging/replay mode. works great long only thing in http request handlers fire actions (e.g. success , failure actions). implement simple global boolean (if (!debug) { httpreq(...) }), make pattern bit more formal.

in event sourcing parlance, use gateways such purposes. in normal operation, gateway makes http requests, , in debugging, turn gateway off (so doesn't make http requests).

that said, think problem can solved rethinking http requests made.

so essentially, based on user interaction view, action dispatched. store owns logic on how transition current state0 next state1 given action. data state1 needed form new http request.

in second link in question (where should ajax request made in flux app?), i recommend doing writes in action creators reads in the stores. if extrapolate pattern use case, might end (pseudocode , long variable names clarity):

class datatable extends react.component {   render() {     // assuming store data table contains 2 sets of data:     // 1 filter selection , 1 pagination.     // i'll assume they're passed props here; assumes     // component somehow re-rendered when store changes.     var filter = this.props.filter;     var start = this.props.start;     var end = this.props.end;      var data = this.props.datatablestore.getdataforpageandfilter(       start, end, filter     );      // store either give loading_token,     // indicates data still loading,     // or give loaded data     if (data === datatablestore.loading_token) {       return this.renderloading();     } else {       return this.renderdata(data);     }   } }  class datatablestore {   constructor() {     this.cache = {};     this.filter = null;     this.start = 0;     this.end = 10;   }    getdataforpageandfilter(start, end, filter) {     var url = httpapigateway.urlforpageandfilter(start, end, filter);      // in better implementation, httpapigateway     // might caching automatically, rather     // making store keep cache     if (!this.cache[url]) {       this.cache[url] = datatablestore.loading_token;        httpapigateway.query(url)       .then((response) => {         // success         var payload = {           url: url,           data: response.body         };         dispatch(data_fetch_success, payload);       }, (error) => {         // error         dispatch(data_fetch_fail, { ... });       });     }      return this.cache[url];   }    handlechangefilteraction(action) {     this.filter = action.payload.filter;     // store decides reset pagination     this.start = 0;     this.end = 10;     this.emit("change");   }    handledatafetchsuccessaction(action) {     this.cache[action.payload.url] = data;     this.emit("change");   }    handledatafetchfailaction(action) {     // ...    } }  datatablestore.loading_token = "loading"; // unique value; symbols work 

you can see store responsible deciding how update pagination , filter variables, not responsible deciding when http requests should made. instead, view requests data, , if store doesn't have in cache, then make http request.

this allows view pass in additional local state getter (in case http requests depends on local state).