使用 flux 在 reactjs 中显示 AJAX 调用加载状态

Question

我想跟踪异步 Ajax 请求的加载、成功和错误状态。我的商店在加载、成功和错误操作时发生变化，但反应组件仅在成功或错误时发生变化。因此我无法检测反应组件中的加载状态。

下面是我的代码的样子：

调度员

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

React 组件

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

Answer 1

我发现解决此问题的唯一解决方案是，假设加载状态为真，而状态中没有数据且错误状态为假。

所以我在视图组件中的渲染方法看起来像：-

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

使用 flux 在 reactjs 中显示 AJAX 调用加载状态

Displaying AJAX Call loading state in reactjs with flux

reactjs

reactjs-flux