Where should HTTP requests be triggered in Flux?

Question

There is a lot of discussion about how to communicate with external services in Flux.

It's pretty clear that the main workflow is to run an HTTP request, which will ultimately send a successful or unsuccessful action based on the response. You can also send the message "in progress" before making a request.

But what if query parameters depend on the state of the repository? No one seems to mention this.

Thus, essentially, based on the user's interaction with the view, an ACTION is sent. The store has the logic of how to go from current state0 to the next state1 given by ACTION. The data from state 1 is necessary for the correct formation of a new HTTP request.

For example, the user selects a new filter on the page, and the repository also decides to reset pagination. This should result in a new HTTP request with (new filter value, first page), and not (new filter value, current page from state 0).

View cannot make the HTTP call itself correct using user interaction, because then it will have to duplicate the storage logic to go to the next state.

View cannot make an HTTP call in its onChange repository a handler, because at this stage it is already unknown what happened as a result of the state change.

, , firewall HTTP- . HTTP-, .

HTTP- Flux?

Answer 1

:

, , firewall HTTP- . HTTP-, .

, HTTP-, /. , , HTTP-, - (, SUCCESS FAILURE). (if (!debug) { httpReq(...) }), .

Event Sourcing parlance, . Gateway HTTP-, Gateway ( HTTP-).

, , , HTTP-.

, , , . , 0 1, ACTION. 1 HTTP-.

( ajax Flux?, , . , - ( ):

class DataTable extends React.Component {
  render() {
    // Assuming that the store for the data table contains two sets of data:
    // one for the filter selection and one for the pagination.
    // I'll assume they're passed as props here; this also assumes that
    // this component is somehow re-rendered when the 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
    );

    // the store will either give us the LOADING_TOKEN,
    // which indicates that the data is still loading,
    // or it will give us the 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 a better implementation, the HttpApiGateway
    // might do the caching automatically, rather than
    // making the store keep the 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;
    // the store also decides to 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"; // some unique value; Symbols work well

, , , , HTTP-. , , HTTP.

getter ( , HTTP- ).

Answer 2

, , .

---

Flux EventSourcing/CQRS/Domain-Driven-Design

- Flux . Flux ActionCreators DDD Flux Actions DDD.

(LOAD_TIMELINE ()). , . , , ...

, ( ).

React, , - json. .

---

, ? .

DDD, . , , . - , Flux ActionBuilders (, , )

, , , ACTION . , . 1, ACTION. 1 HTTP-.

DDD Saga ( Process Manager). , .

, Saga : "FILTERS_UPDATED", "RELOAD_LIST" . , - Flux.

, , , .

---

Atom-React, sagas.