React Flux - 「ディスパッチの途中でディスパッチ」を回避する同時アクション呼び出しを処理しますか？

Question

2つのAPIエンドポイントから初期データを取得する必要があるコントローラビューが呼び出されました。最初の部分はユーザー認証状態で、2番目の項目はメニューの作成に使用される項目のリストです。

コントローラービュー：

import React, { PropTypes } from 'react'; 
import BaseComponent from '../../Components/Base'; 
import Menu from '../../Components/App/Menu'; 
import ItemAction from '../../Actions/Items/ItemAction'; 
import AuthAction from '../../Actions/Auth/AuthAction'; 
import ItemStore from '../../Stores/Items/ItemStore'; 
import AuthStore from '../../Stores/Auth/AuthStore'; 

class App extends BaseComponent { 
    constructor(props) { 
     super(props); 

     this.state = {}; 

     this._bind('getAuth', 'getItems'); 
    } 

    componentWillMount() { 
     AuthStore.addChangeListener(this.getAuth); 
     ItemStore.addChangeListener(this.getItems); 
    } 

    componentDidMount() { 
     AuthAction.check(); 
     ItemAction.getItems(); 
    } 

    componentWillUnmount() { 
     AuthStore.removeChangeListener(this.getAuth); 
     ItemStore.removeChangeListener(this.getItems); 
    } 

    getAuth() { 
     this.setState(AuthStore.getState()); 
    } 

    getItems() { 
     this.setState(ItemStore.getState()); 
    } 

    render() { 
     const { user, items } = this.state; 

     const childrenWithProps = React.Children.map(this.props.children, 
      (child) => React.cloneElement(child, { 
       user: user, 
       items: items 
      }) 
     ); 

     return (
      <div> 
       <Menu user={user} items={items}/> 
       { childrenWithProps } 
      </div> 
     ); 
    } 
} 

App.propTypes = { 
    params: PropTypes.object.isRequired, 
    query: PropTypes.object 
}; 

export default App; 

ItemStore：

import AppStore from '../AppStore'; 
import AppDispatcher from '../../Dispatcher/AppDispatcher'; 
import ItemApi from '../../Utils/API/Items/ItemApi'; 
import ItemConstants from '../../Constants/Items/ItemConstants'; 

var appState = { 
    items: undefined, 
    isLoading: false 
}; 


class ItemStore extends AppStore { 
    constructor() { 
     super(); 
    } 

    reset() { 
     appState = {}; 
    } 

    getState() { 
     return appState; 
    } 
} 

let storeInstance = new ItemStore(); 

storeInstance.dispatchToken = AppDispatcher.register(payload => { 
    var action = payload.action; 

    switch(action.type) { 
     case ItemConstants.GET_ITEMS_SUCCESS: 
      appState = { 
       items: action.data 
      }; 
      break; 

     case ItemConstants.GET_ITEMS_FAILURE: 
      appState = { 
       items: {} 
      }; 
      break; 

     default: 
      return; 
    } 

    storeInstance.emitChange(); 
}); 

export default storeInstance; 

あるAuthStore：

import AppStore from '../AppStore'; 
import AppDispatcher from '../../Dispatcher/AppDispatcher'; 
import AuthApi from '../../Utils/API/Auth/AuthApi'; 
import AuthConstants from '../../Constants/Auth/AuthConstants'; 

var appState = { 
    user: undefined, 
    isLoading: false 
}; 


class AuthStore extends AppStore { 
    constructor() { 
     super(); 
    } 

    reset() { 
     appState = {}; 
    } 

    getState() { 
     return appState; 
    } 
} 

let storeInstance = new AuthStore(); 

storeInstance.dispatchToken = AppDispatcher.register(payload => { 
    var action = payload.action; 

    switch(action.type) { 
     case AuthConstants.GET_USER_SUCCESS: 
      appState = { 
       user: action.user 
      }; 
      break; 

     case AuthConstants.GET_USER_FAILURE: 
      appState = { 
       user: undefined 
      }; 
      break; 

     default: 
      return; 
    } 

    storeInstance.emitChange(); 
}); 

export default storeInstance; 

AuthAction

import AppDispatcher from '../../Dispatcher/AppDispatcher'; 
import AuthApi from '../../Utils/API/Auth/AuthApi'; 
import AuthConstants from '../../Constants/Auth/AuthConstants'; 
import Jwt from '../../Utils/Jwt'; 

var AuthAction = { 
    check: function() { 
     if (Jwt.tokenIsValid()) { 
      AuthApi.get().then(
       function(response) { 
        AppDispatcher.handleServerAction({ 
         type: AuthConstants.GET_USER_SUCCESS, 
         user: response.data 
        }); 
       } 
      ) 
      .catch(
       function(error) { 
        AppDispatcher.handleServerAction({ 
         type: AuthConstants.GET_USER_FAILURE 
        }); 
       } 
      ); 
     } else { 
      AppDispatcher.handleServerAction({ 
       type: AuthConstants.GET_USER_FAILURE 
      }); 
     } 
    } 
}; 

export default AuthAction; 

ItemAction

import AppDispatcher from '../../Dispatcher/AppDispatcher'; 
import ItemApi from '../../Utils/API/Items/AuthApi'; 
import ItemConstants from '../../Constants/Items/ItemConstants'; 

var ItemAction = { 
    getItems: function() { 
      ItemApi.getItems().then(
       function(response) { 
        AppDispatcher.handleServerAction({ 
         type: ItemConstants.GET_ITEMS_SUCCESS, 
         items: response.data 
        }); 
       } 
      ) 
      .catch(
       function(error) { 
        AppDispatcher.handleServerAction({ 
         type: ItemConstants.GET_ITEMS_FAILURE 
        }); 
       } 
      ); 
    } 
}; 

export default ItemAction; 

彼らはただAxiosを使用してバックエンドへの単純な呼び出しを行うように私は、APIファイルが含まれていません。すべてが機能し、私が言うことができる限り、Fluxと互換性がありますが、私はちょっとしたエラー「ディスパッチの途中でディスパッチできません」を避けることができません。

私はそれを正しくやっているのか、ディスパッチエラーを防ぐために何ができるのか教えてもらえますか？

Answer 1

this StackOverflow threadとthis blog postのような複数の同時リクエストを避けるためのコードが追加された例を見てきました。最初の例では、同じエンドポイントへの同時要求を防止し、2番目の例では新しい要求を作成するときに保留中の要求を実際に取り消しています。