在Flux应用程序中应在何处提出Ajax请求？

Question

我正在创建具有flux体系结构的react.js应用程序，并且试图弄清楚应该何时何地从服务器请求数据。有这个例子吗？（不是TODO应用！）

Answer 1

我强烈支持将异步写入操作放在动作创建者中，而将异步读取操作放在商店中。目标是将商店状态修改代码保留在完全同步的动作处理程序中；这使他们易于推理，并且易于进行单元测试。为了防止对同一端点的多个同时请求（例如，重复读取），我将把实际的请求处理移到一个单独的模块中，该模块使用promise来防止多个请求。例如：

class MyResourceDAO {
  get(id) {
    if (!this.promises[id]) {
      this.promises[id] = new Promise((resolve, reject) => {
        // ajax handling here...
      });
    } 
    return this.promises[id];
  }
}

尽管存储中的读取涉及异步函数，但有一个重要的警告，即存储不会在异步处理程序中更新自身，而是触发操作， 仅 在响应到达 时才
触发操作。此操作的处理程序最终进行了实际状态修改。

例如，一个组件可能会：

getInitialState() {
  return { data: myStore.getSomeData(this.props.id) };
}

该商店可能实现了一种类似于以下内容的方法：

class Store {
  getSomeData(id) {
    if (!this.cache[id]) {
      MyResurceDAO.get(id).then(this.updateFromServer);
      this.cache[id] = LOADING_TOKEN;
      // LOADING_TOKEN is a unique value of some kind
      // that the component can use to know that the
      // value is not yet available.
    }

    return this.cache[id];
  }

  updateFromServer(response) {
    fluxDispatcher.dispatch({
      type: "DATA_FROM_SERVER",
      payload: {id: response.id, data: response}
    });
  }

  // this handles the "DATA_FROM_SERVER" action
  handleDataFromServer(action) {
    this.cache[action.payload.id] = action.payload.data;
    this.emit("change"); // or whatever you do to re-render your app
  }
}