如何在 Flux 架构中处理 ajax 请求响应？

Posted 2023-02-22

【中文标题】如何在 Flux 架构中处理 ajax 请求响应？

【英文标题】：How can I handle a ajax request response in the Flux Architecture?

【发布时间】：2015-04-26 14:46:32

【问题描述】：

查看Flux Documentation 我无法弄清楚ajax 更新的代码和ajax 提取如何适合调度程序、存储、组件架构。

谁能提供一个简单的虚拟示例，说明如何在页面加载后从服务器获取数据实体，以及以后如何将该实体推送到服务器。视图/组件如何翻译和处理请求的“完成”或“错误”状态？商店将如何等待 ajax 请求等待？ :-?

【参考方案1】：

这是你要找的吗？

http://facebook.github.io/react/tips/initial-ajax.html

您还可以在商店中实现获取以管理信息。

这是一个例子（它是一个概念，不是实际工作的代码）：

'use strict';

var React = require('react');
var Constants = require('constants');
var merge = require('react/lib/merge'); //This must be replaced for assign
var EventEmitter = require('events').EventEmitter;
var Dispatcher = require('dispatcher');

var CHANGE_EVENT = "change";

var data = ;
var message = "";

function _fetch () 
  message = "Fetching data";
  $.ajax(
    type: 'GET',
    url: 'Url',
    contentType: 'application/json',
    success: function(data)
      message = "";
      MyStore.emitChange();
    ,
    error: function(error)
      message = error;
      MyStore.emitChange();
    
  );
;

function _post (myData) 
  //Make post
  $.ajax(
    type: 'POST',
    url: 'Url',
    // post payload:
    data: JSON.stringify(myData),
    contentType: 'application/json',
    success: function(data)
      message = "";
      MyStore.emitChange();
    ,
    error: function(error)
      message = "update failed";
      MyStore.emitChange();
    
  );
;

var MyStore = merge(EventEmitter.prototype, 
  emitChange: function () 
    this.emit(CHANGE_EVENT);
  ,

  addChangeListener: function (callback) 
    this.on(CHANGE_EVENT, callback);
  ,

  removeChangeListener: function (callback) 
    this.removeListener(CHANGE_EVENT, callback);
  ,

  getData: function ()
    if(!data)
      _fetch();
    
    return data;
  ,

  getMessage: function ()
    return message;
  ,

  dispatcherIndex: Dispatcher.register( function(payload) 
    var action = payload.action; // this is our action from handleViewAction

    switch(action.actionType)
      case Constants.UPDATE:
        message = "updating...";
        _post(payload.action.data);
        break;
    
    MyStore.emitChange();
    return true;
  )
);

module.exports = MyStore;

然后您需要为您的组件订阅商店更改事件

var React = require('react');

var MyStore = require('my-store');

function getComments ()
  return 
    message: null,
    data: MyStore.getData()
  
;

var AlbumComments = module.exports = React.createClass(
  getInitialState: function() 
    return getData();
  ,
  componentWillMount: function()
    MyStore.addChangeListener(this._onChange);
  ,
  componentWillUnmount: function()
    MyStore.removeChangeListener(this._onChange);
  ,
  _onChange: function()
    var msg = MyStore.getMessage();
    if (!message)
      this.setState(getData());
     else 
      this.setState(
        message: msg,
        data: null
      );
    
  ,

  render: function() 
    console.log('render');
    return (
      <div>
         this.state.message 
        this.state.data.map(function(item)
          return <div> item </div>
        )
      </div>
    );
  
);

我希望它足够清楚。

【讨论】：

我在考虑这个问题，但从这段代码看来，组件直接从商店请求数据，而不需要调度程序和操作负载。由于调度程序有一个 waitFor 方法，并且某些商店可能会执行异步操作来更新，因此该解决方案不起作用。我们要么一直有同步存储，要么我们有不同类型的调度程序。