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

2020/10/18 13:21 · javascript ·  · 0评论

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

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

Fluxxor有一个与API进行异步通信的示例

这篇博客文章对此进行了讨论,并已在React的博客中进行了介绍。


我发现这是一个非常重要且困难的问题,目前尚未明确回答,因为前端软件与后端的同步仍然很痛苦。

是否应该在JSX组件中提出API请求?商店?其他地方?

在商店中执行请求意味着,如果2个商店在给定操作中需要相同的数据,它们将发出2个类似的命令(除非您引入商店之间的依赖关系,我真的不喜欢

就我而言,我发现将Q许诺作为行动的有效载荷非常方便,因为:

  • 我的操作不需要可序列化(我不保留事件日志,不需要事件源的事件重播功能)
  • 它消除了具有不同操作/事件(触发请求/请求完成/请求失败)的需要,并且在可以触发并发请求时,不必使用相关ID进行匹配。
  • 它允许多个存储侦听同一请求的完成,而无需在存储之间引入任何依赖关系(但是引入缓存层可能更好?)

Ajax是邪恶的

我认为Ajax在不久的将来会越来越少使用,因为很难对此进行推理。正确的方式?将设备视为分布式系统的一部分,我不知道我最初是在哪里遇到这个想法的(也许是在这部鼓舞人心的Chris Granger视频中)。

想一想。现在,为了实现可伸缩性,我们使用最终具有一致性的分布式系统作为存储引擎(因为我们无法超越CAP定理,而且我们经常希望可以使用)。这些系统不会通过互相轮询来进行同步(可能不是针对共识操作吗?),而是使用CRDT和事件日志之类的结构来使分布式系统的所有成员最终保持一致(给定的时间,成员将收敛于相同的数据)。 。

现在考虑什么是移动设备或浏览器。它只是分布式系统的成员,可能会遭受网络延迟和网络分区的影响。(即您在地铁上使用智能手机)

如果我们可以构建网络分区和网络速度容忍的数据库(我是说我们仍然可以对隔离的节点执行写操作),那么我们可能可以构建受这些概念启发的前端软件(移动或台式机),并且可以很好地支持离线模式没有应用功能的包装盒不可用。

我认为我们应该真正激发自己灵感,了解数据库如何构建前端应用程序。需要注意的一件事是,这些应用程序不执行POST和PUT以及GET ajax请求来相互发送数据,而是使用事件日志和CRDT来确保最终的一致性。

那么为什么不在前端这样做呢?请注意,后端已经朝着这个方向发展,诸如Kafka之类的工具已被大型企业广泛采用。这也与事件来源/ CQRS / DDD相关。

查看来自Kafka作者的这些很棒的文章,以说服自己:

也许我们可以通过向服务器发送命令并接收服务器事件流(例如通过websockets)开始,而不是触发Ajax请求。

我从未对Ajax请求感到非常满意。正如我们所说,React开发人员往往是函数式程序员。我认为很难推断本地数据应该是您的前端应用程序的“事实来源”,而真实的真正来源实际上是在服务器数据库上,并且您的“本地”事实来源可能已经过时了当您收到它时,除非您按一些la脚的刷新按钮,否则它将永远不会收敛到真实值的真实来源……这是工程吗?

但是由于某些明显的原因,设计这样的东西仍然有点困难:

  • 您的移动/浏览器客户端资源有限,不一定能在本地存储所有数据(因此有时需要使用ajax请求大量内容进行轮询)
  • 您的客户端不应看到分布式系统的所有数据,因此出于安全原因,它需要某种方式来过滤其接收的事件

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

我一直在使用Fluxxor ajax example中的Binary Muse的示例这是我使用相同方法的非常简单的示例。

我有一个简单的产品存储区,其中包含一些产品操作controller-view组件,该组件具有子组件,这些子组件都可以响应对产品存储区所做的更改例如product-sliderproduct-listproduct-search组件。

假冒产品客户

这是伪造的客户端,您可以用来代替实际的返回终端的产品。

var ProductClient = {

  load: function(success, failure) {
    setTimeout(function() {
      var ITEMS = require('../data/product-data.js');
      success(ITEMS);
    }, 1000);
  }    
};

module.exports = ProductClient;

产品专卖店

这是产品商店,显然这是一个很小的商店。

var Fluxxor = require("fluxxor");

var store = Fluxxor.createStore({

  initialize: function(options) {

    this.productItems = [];

    this.bindActions(
      constants.LOAD_PRODUCTS_SUCCESS, this.onLoadSuccess,
      constants.LOAD_PRODUCTS_FAIL, this.onLoadFail
    );
  },

  onLoadSuccess: function(data) {    
    for(var i = 0; i < data.products.length; i++){
      this.productItems.push(data.products[i]);
    }    
    this.emit("change");
  },

  onLoadFail: function(error) {
    console.log(error);    
    this.emit("change");
  },    

  getState: function() {
    return {
      productItems: this.productItems
    };
  }
});

module.exports = store;

现在,发出AJAX请求并成功执行的产品动作​​将触发LOAD_PRODUCTS_SUCCESS动作,将产品返回商店。

产品动作

var ProductClient = require("../fake-clients/product-client");

var actions = {

  loadProducts: function() {

    ProductClient.load(function(products) {
      this.dispatch(constants.LOAD_PRODUCTS_SUCCESS, {products: products});
    }.bind(this), function(error) {
      this.dispatch(constants.LOAD_PRODUCTS_FAIL, {error: error});
    }.bind(this));
  }    

};

module.exports = actions;

因此,this.getFlux().actions.productActions.loadProducts()从任何监听此商店的组件进行调用都会加载产品。

您可以想象具有不同的动作,但是这些动作会addProduct(id) removeProduct(id)按照相同的模式响应诸如等的用户交互

希望该示例有所帮助,因为我发现实现起来有些棘手,但无疑有助于使我的商店保持100%同步。

我在这里回答了一个相关的问题:如何处理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
  }
}

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

希望能有所帮助。:)

本文地址:http://javascript.askforanswer.com/zaifluxyingyongchengxuzhongyingzaihechutichuajaxqingqiu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!