플럭스 데이터 중첩

Question

내 앱에서 하나의 데이터에 대해 두 번의 ajax 호출을 수행합니다. 먼저 ecommerceIntegrations의 목록을 얻기 위해 전화를 겁니다. 일단 내가 가지고 있으면, 나는 각각 그들의 각각의 orders을 움켜 잡을 수있다.

componentDidMount: function() { 
    EcommerceIntegrationStore.addChangeListener(this._onIntegrationStoreChange); 
    OrderStore.addChangeListener(this._onOrderStoreChange); 

    WebshipEcommerceIntegrationActionCreators.getEcommerceIntegrations(); 
}, 

_onIntegrationStoreChange: function() { 
    var ecommerceIntegrations = EcommerceIntegrationStore.getEcommerceIntegrations(); 
    this.setState({ecommerceIntegrations: ecommerceIntegrations}); 
    ecommerceIntegrations.forEach(function(integration) { 
     WebshipOrderActionCreators.getPendingOrdersOfIntegration(integration.id); 
    }); 
}, 

_onOrderStoreChange: function() { 
    this.setState({ 
     pendingOrders: OrderStore.getAllPendingOrders(), 
     pendingOrdersByIntegration: OrderStore.getPendingOrdersByIntegration() 
    }); 
} 

내가 페이스 북의 플럭스 패턴을 따라하기 위해 노력하고있어, 나는이 그것을 따르지 않는 확신 :

내 현재 코드는 다음과 같이 보인다. Flux로 데이터 중첩에 대한 다른 게시물을 보았지만 여전히 이해할 수 없습니다. 모든 포인터는 감사하겠습니다.

Answer 1

모든 것은 여기를 제외하고 좋아 보인다 :

ecommerceIntegrations.forEach(function(integration) { 
    WebshipOrderActionCreators.getPendingOrdersOfIntegration(integration.id); 
}); 

대신 백업, (더 나쁜 아직 ecommerceIntegrations의 모든 항목에 대한 작업을하거나)는 다른 작업에 응답하여 조치를 해고하려고하고 응답의 원래의 행동. 아직 전체 데이터 세트가없고 서버를 두 번 호출해야하는 경우 시스템을 완전히 업데이트하는 데 필요한 모든 데이터를 얻을 때까지 작업을 기다려야합니다. 보기 구성 요소가 아닌 XHR 성공 처리기에서 두 번째 호출을 시작합니다. 이 방법으로 XHR 호출은 디스패치 사이클과 독립적이며 뷰에서 벗어나보다 적절하게 캡슐화 된 영역으로 애플리케이션 로직을 이동 시켰습니다.

첫 번째 호출 후에 앱을 정말로 업데이트하려면 두 번째 호출을하기 전에 XHR 성공 처리기에서 작업을 보내면됩니다.

이상적으로,이 모든 것을 한 번의 호출로 처리 할 수 ​​있지만, 웹 API가 사용자의 통제하에 있지 않은 경우에는 불가능하다고 생각합니다.

플럭스 앱에서 액션은 엄격한 일련의 이벤트로 함께 묶을 수있는 것으로 생각해서는 안됩니다. 그들은 서로 독립적으로 살아야하며, 사물을 연결하는 충동이 있다면 앱이 원래 작업에 어떻게 반응 하는지를 백업하고 재 설계해야 할 것입니다.