Ajax 如何使一个商店依赖于另一个商店?

Ajax 如何使一个商店依赖于另一个商店?,ajax,reactjs,flux,Ajax,Reactjs,Flux,我想我能理解,但这种变化让我感到困惑。我觉得最简单的任务现在需要成倍增加的代码和复杂性 我试图用图表和列表来报告一些数据。我创建的是一个“WindowsStore”,其中包含表示报告期间的“开始”和“结束”时间(默认为一天)。我在一个组件中有一个按钮,可以一次向前和向后移动一个小时 在组件的render()方法中,我将返回以下内容(作为更大组件的一部分): WindowActions.stepBack向WindowsStore发送消息以更新开始值和结束值: stepBack: function(

我想我能理解,但这种变化让我感到困惑。我觉得最简单的任务现在需要成倍增加的代码和复杂性

我试图用图表和列表来报告一些数据。我创建的是一个“WindowsStore”,其中包含表示报告期间的“开始”和“结束”时间(默认为一天)。我在一个组件中有一个按钮,可以一次向前和向后移动一个小时

在组件的render()方法中,我将返回以下内容(作为更大组件的一部分):

WindowActions.stepBack向WindowsStore发送消息以更新开始值和结束值:

stepBack: function() {
    Dispatcher.dispatch({type: WindowConstants.Actions.STEP_BACK});
}
WindowsStore将步进回退,并将开始值和结束值递减1小时。它发出一个更改事件,组件使用新的状态“开始”和“结束”值更新图形边界

我有第二个存储,它记录图形的数据,GraphStore。数据通过对服务器的AJAX调用以图形形式填充,理想情况下使用WindowsStore中的开始值和结束值(注意:我删除了错误处理):

我可以在componentDidMount()中调用refresh()以在开始时更新图形:

getInitialState: function() {
    return {
        window: WindowStore.getState(),
        graph: GraphStore.getState()
    }
}, 

componentDidMount: function() {
    GraphActions.refresh(this.state.window.start, this.state.window.end);
}
这是我的思维障碍:我想做的是在窗口移动时刷新数据。我应该如何/在哪里打这个电话?我觉得我的图形组件应该在状态改变时调用GraphActions.refresh(),但这显然是一个调度链,所以不需要。我能找到的唯一替代方法是使用WindowActions.stepBack调用GraphActions.refresh。但这意味着我必须将新的开始值和结束值以及紧密耦合的图形传递给WindowActions:

stepBack: function(start, end) {
    Dispatcher.dispatch({type: WindowConstants.Actions.STEP_BACK});
    GraphActions.refresh(start, end);
}
是这样吗?如果要更新来自同一WindowsStore的列表组件或其他图形组件图形,该怎么办?我也应该叫他们退后吗?如果我需要GraphActions.refresh()加载的数据,并且我想等待刷新完成,该怎么办?这感觉太紧密耦合和混乱

请帮助。

您可以使用通量函数


因此,您有两个存储注册到同一个调度程序,一个存储等待另一个存储首先处理操作,然后等待的一个存储可以更新和调度更改事件。参见Flux docs

您是否可以共享组件源代码和窗口存储源代码实现
waitFor
功能或使用Flux libs
waitFor
refresh: function(start, end) {
    Api.getGraphData(start, end, function(reply) {
        Dispatcher.dispatch({
            type: GraphConstants.Actions.Refresh, 
            results: reply.data
        });
    });
}
getInitialState: function() {
    return {
        window: WindowStore.getState(),
        graph: GraphStore.getState()
    }
}, 

componentDidMount: function() {
    GraphActions.refresh(this.state.window.start, this.state.window.end);
}
stepBack: function(start, end) {
    Dispatcher.dispatch({type: WindowConstants.Actions.STEP_BACK});
    GraphActions.refresh(start, end);
}