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

JavaScript

小胖阳光

2020-03-10

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

第524篇《在Flux应用程序中应在何处提出Ajax请求?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
阳光猪猪 2020.03.10

这是我对此的看法:http : //www.thedreaming.org/2015/03/14/react-ajax/

希望能有所帮助。:)

Itachi猪猪 2020.03.10

我在这里回答了一个相关的问题:如何处理flux中的嵌套api调用

行动不应该是导致改变的事物。他们应该像报纸一样,将外部世界的变化通知应用程序,然后应用程序对该消息做出响应。商店本身会引起变化。动作只是通知他们。

Flux的创建者Bill Fisher https://stackoverflow.com/a/26581808/4258088

您基本上应该做的是通过操作说明所需的数据。如果商店从该操作中获悉,则应决定是否需要获取一些数据。

该存储区应负责累积/获取所有需要的数据。但是,需要特别注意的是,在商店请求数据并获得响应之后,它应该使用获取的数据本身触发操作,这与商店直接处理/保存响应相反。

一家商店可能看起来像这样:

class DataStore {
  constructor() {
    this.data = [];

    this.bindListeners({
      handleDataNeeded: Action.DATA_NEEDED,
      handleNewData: Action.NEW_DATA
    });
  }

  handleDataNeeded(id) {
    if(neededDataNotThereYet){
      api.data.fetch(id, (err, res) => {
        //Code
        if(success){
          Action.newData(payLoad);
        }
      }
    }
  }

  handleNewData(data) {
    //code that saves data and emit change
  }
}
理查德阳光 2020.03.10

您可以在操作创建者或商店中调用数据。重要的是不要直接处理响应,而要在错误/成功回调中创建一个动作。直接在商店中处理响应会导致设计更加脆弱。

老丝村村 2020.03.10

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

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android