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

Question

看看Flux Documentation我无法弄清楚ajax更新和ajax fetch的代码如何适应调度程序，存储和组件体系结构。

任何人都可以提供一个简单的，假为例，数据如何的实体将成为从服务器后，页面加载牵强，以及如何实体将在稍后的日期推到服务器。请求的“完整”或“错误”状态如何被视图/组件翻译和处理？商店如何等待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> 
    ); 
    } 
}); 

我希望这是足够清楚。