在Flux应用程序中应该在哪里发出ajax请求？ [英] Where should ajax request be made in Flux app?

问题描述

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

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. Is there a any example for this. (Not TODO app!)

推荐答案

我是异步写入操作的主要支持者在商店中的动作创建者和异步读取操作中。目标是将存储状态修改代码保存在完全同步的动作处理程序中;这使得它们易于推理并且易于单元测试。为了防止对同一端点的多个同时请求（例如，双读），我将实际的请求处理移动到一个单独的模块中，该模块使用promises来阻止多个请求;例如：

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

这篇关于在Flux应用程序中应该在哪里发出ajax请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！