javascript - 在Flux应用程序中应该在哪里发出ajax请求？(Where should ajax request be made in Flux app?)

Question

I'm creating a react.js application with flux architecture and I am trying figure out where and when a request for data from the server should be made.(我正在使用flux体系结构创建一个react.js应用程序，我正在尝试弄清楚应该在何时何地从服务器请求数据。)

Is there a any example for this.(这有什么例子吗？) (Not TODO app!)(（不是TODO app！）)   ask by Eniz Gülek translate from so

Answer 1

I'm a big proponent of putting async write operations in the action creators and async read operations in the store.(我非常支持将异步写入操作放在动作创建者和商店中的异步读取操作中。)

The goal is to keep the store state modification code in fully synchronous action handlers;(目标是将存储状态修改代码保存在完全同步的动作处理程序中;) this makes them simple to reason about and simple to unit test.(这使得它们易于推理并且易于单元测试。) In order to prevent multiple simultaneous requests to the same endpoint (for example, double-reading), I'll move the actual request processing into a separate module that uses promises to prevent the multiple requests;(为了防止对同一端点的多个同时请求（例如，双读），我将实际的请求处理移动到一个单独的模块中，该模块使用promises来阻止多个请求;) for example:(例如：)

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

While reads in the store involve asynchronous functions, there is an important caveat that the stores don't update themselves in the async handlers, but instead fire an action and only fire an action when the response arrives.(虽然存储中的读取涉及异步函数，但有一个重要的警告，即存储不会在异步处理程序中自行更新，而是触发操作并仅在响应到达时触发操作。)

Handlers for this action end up doing the actual state modification.(此操作的处理程序最终会进行实际的状态修改。)

For example, a component might do:(例如，组件可能会：)

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

The store would have a method implemented, perhaps, something like this:(商店将实现一个方法，也许是这样的：)

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
  }
}