顯示AJAX呼叫加載狀態在與flux的reactjs中

我想跟蹤異步Ajax請求的加載，成功和錯誤狀態。我的商店正在改變加載，成功和錯誤行動，但反應組件只有在成功或錯誤時纔會改變。因此我無法檢測到反應組件中的加載狀態。顯示AJAX呼叫加載狀態在與flux的reactjs中

下面是我的代碼看起來像：

調度

var AppDispatcher = assign(new Dispatcher(), { 
     handleServerAction: function(action) { 
     var payload = { 
     source: PayloadSources.SERVER_ACTION, 
     action: action 
     }; 
     this.dispatch(payload); 
     } 
    });

行動造物主

var ActionCreator = { 
    loadData: function() { 
    //Calling Synchronous Action   
    AppDispatcher.handleServerAction({actionType:ActionTypes.LOAD_DATA}); 

    //Calling Asynchronous Action 
    ApiClient.getData(function(dataObj) { 
    AppDispatcher.handleServerAction({actionType:ActionTypes.LOAD_DATA_SUCCESS, dataObj: dataObj}); 
    }.bind(this), function(error) { 
    AppDispatcher.handleServerAction({actionType:ActionTypes.LOAD_DATA_FAIL, error: error}); 
    }.bind(this)); 
} 
};

API客戶端

var ApiClient = { 
/** 
* @param success callback 
* @param failure callback 
*/ 
getData : function(success, failure){ 
    $.ajax({ 
    url : '/api/get-data', 
    dataType: 'json', 
    success : function(data){ 
     success(data); 
    }, 
    error : function(jqXHR, textStatus, errorThrown){ 
     failure(errorThrown); 
    } 
    }); 
} 
};

AppStore的

var _state = { 
      loading: false, 
      error : null, 
      dataObj: {} 
     }; 

function persistStoreData(loading, error, response) { 
    _state.loading = loading; 
    _state.error = error; 
    _state.dataObj = response; 
} 
var AppStore = assign({}, EventEmitter.prototype, { 
    //writing only few important parts 
    getState: function(){ 
     return _state; 
    }, 
    dispatcherIndex: AppDispatcher.register(function(payload) { 
    var action = payload.action; 
    switch(action.actionType){ 
    case ActionTypes.LOAD_DATA: 
     persistStoreData(true, null, {}); 
     break; 
    case ActionTypes.LOAD_DATA_SUCCESS: 
     persistStoreData(false, null, action.dataObj); 
     break; 
    case ActionTypes.LOAD_DATA_FAIL: 
     persistStoreData(false, payload.action.error, {}); 
     break; 
    default: 
     return true; 
    } 
    AppStore.emitChange(); 
    return true; // No errors. Needed by promise in Flux Dispatcher. 
)};

陣營組件

var AppComponent = React.createClass({ 

getInitialState: function() { 
    return AppStore.getState(); 
}, 

componentDidMount: function() { 
    ActionCreator.loadData();//Invoking Action, loading data 
    AppStore.addChangeListener(this._onChange); 
}, 

componentWillUnmount: function() { 
    AppStore.removeChangeListener(this._onChange); 
}, 

render: function(){ 
    <div className="panel-body"> 
     {this.state.error ? "Error loading data" : null} 
     {this.state.loading ? 'Loading...': null} 
     {this.state.dataObj?'Success': null} 
    </div> 
} 
});

來源

2015-02-08 techgyani

你能後整個代碼爲您的商店？尤其是'persistStoreData'和'getState'函數。 – nilgun 2015-02-08 16:21:17

@nilgun我加了兩個函數.. – techgyani 2015-02-08 16:26:12

唯一的解決辦法，我發現要解決這個問題，假設負載狀態爲真時，有中沒有數據在狀態和錯誤狀態是錯誤的。

所以我在視圖組件渲染方法是這樣的： -

render: function { 
    return{ 
    (<div> 
     {Util.isEmpty(this.state.data) && !(this.state.error) ? 'Loading...': null} 
    </div>); 
    }

來源

2015-02-24 07:33:25 techgyani

顯示AJAX呼叫加載狀態在與flux的reactjs中

回答

相關問題