Question

ReactJS我想我明白了，但Flux让我感到困惑。我觉得现在最简单的任务需要指数级的代码和复杂性。

我正在尝试使用图表和列表报告一些数据。我创建的是一个“WindowStore”，它保存代表报告周期（默认为一天）的“开始”和“结束”时间。我在一个组件中有按钮，一次向前和向后移动一小时。

在组件的render（）方法中，我将返回此（作为更大组件的一部分）：

<button onClick={this.stepBack} type="button"
        className="btn btn-default btn-xs" 
        disabled={this.state.loading}>
        <i className="fa fa-angle-double-left fa-2x"></i>
</button>

我的组件中有这个处理程序：

stepBack: function() {
    WindowActions.stepBack();
}

WindowActions.stepBack将一条消息调度到WindowStore以更新开始和结束值：

stepBack: function() {
    Dispatcher.dispatch({type: WindowConstants.Actions.STEP_BACK});
}

WindowStore捕获STEP_BACK并将起始值和结束值递减1小时。它发出一个更改事件，组件使用新的状态“start”和“end”值更新图形边界。

我有第二个商店，记录图表的数据，GraphStore。从GraphActions中的AJAX调用到服务器填充数据，理想情况下使用WindowStore的开始值和结束值（注意：我修剪了错误处理）：

refresh: function(start, end) {
    Api.getGraphData(start, end, function(reply) {
        Dispatcher.dispatch({
            type: GraphConstants.Actions.Refresh, 
            results: reply.data
        });
    });
}

我可以在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。但这意味着我必须传递新的开始和结束值以及将GraphActions紧密耦合到WindowActions：

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

这是对的吗？当我想要从同一个WindowStore更新列表组件或其他图形组件时，我该怎么办？我是否应该在stepBack中给那些人打电话？如果我需要GraphActions.refresh（）加载的数据并且我想等待刷新完成怎么办？这感觉太紧密和混乱。

请帮忙。

Answer 1

您可以使用Flux waitFor()功能

因此，您有2个商店注册到同一个调度程序并且有一个商店等待另一个商店首先处理该操作然后等待的一个商店可以更新并发送更改事件。请参阅Flux docs example

如何使一个ReactJS Store依赖于另一个商店？

1 个答案: