如何在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> 
    ); 
    } 
}); 

我希望這是足夠清楚。