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

Question

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

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

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

我希望它足够清楚。