Reactjs 多次通量状态更新后重新计算

我有一个React应用程序，使用打字脚本编写的通量。页面上有两个引导下拉按钮，其中包含用户为影响查询结果集而选择的可能值

使用普通的Flux操作和存储，我调用了两个api调用来检索绑定到状态的下拉按钮列表的json值

我试图对计算函数进行初始触发，调用完成后需要两个下拉列表中的值，但由于状态设置是异步的，我不知道何时触发它

我已尝试在我的组件上使用状态设置函数，但我总是被告知在分派时无法分派（即通过action/store方法调用我的calc函数）

在调用函数之前，如何等待两个调用完成

componentWillMount() {
    AvailabilityTimePresetsStore.addChangeListener(this._onChange_availabilityTimePresetsStore);
    AvailabilityTimePresetActions.getTimePresets();
}

_onChange_availabilityTimePresetsStore = () => {
        let timePresets = this._getStateFromAvailabilityTimePresetsStore().presets;
        // set initial value
        let currentPreset = this.state.selectedTimePreset;
        this.setState({ timePresetOptions: timePresets, selectedTimePreset: currentPreset == null ? timePresets[0] : currentPreset });
    }

_getStateFromAvailabilityTimePresetsStore() {
    // retrieve the state from the store
    return AvailabilityTimePresetsStore.getState();
}

---

当从我的TimePresetsStore触发emitChange时，将调用上述命令。我检查之前是否没有选择预设，如果没有，则将selectedTimePreset设置为第一个（这是初始加载）。此时，我想启动recalc（）函数以从查询中获取结果。但是如果我在这里调用它，或者作为回调函数调用setState，就会得到dispatcher错误。在这里，我也无法判断另一个下拉列表是否以相同的方式填充和设置，我需要两者都将所选值传递给查询。

好的，我想您实现Flux的方式似乎不是最好的。 让我举一个例子：

//ModelActions.js
导出默认类ModelActions{
静态操作一（参数）{
调度员手动操作({
actionType:“操作\u一个\u开始”
});
获取（'uri'，…参数）
。然后（resp=>{
调度员手动操作({
actionType:“ACTION\u ONE\u SUCCESS”，
有效载荷：resp
});
//我还可以在这里采取更多行动，如：
调度员手动操作({
动作类型：“动作二”
});
})
.catch（（错误）=>{
调度员手动操作({
actionType:'ACTION\u ONE\u ERROR'，
有效负载：error.message
});
});
}
}
//ModelStore.js
从“事件”导入{EventEmitter}；
从“对象分配”导入分配；
从“../dispatcher/YourDispatcher”导入YourDispatcher；
让ModelStore=assign（{}，EventEmitter.prototype{
改变{
这个.emit（'change'）；
},
addChangeListener（回调）{
在（'change'，callback'时返回此值）；
},
removeChangeListener（回调）{
这个.removeListener（'change'，callback）；
},
actionOneStarting（）{
返回_isActionOne开始；
},
actionOneSuccess（）{
返回操作成功；
},
getActionOneError（）{
返回_actionOneError；
},
getActionOnePayload（）{
返回有效载荷；
}
});
ModelStore.dispatchToken=YourDispatcher.register（（操作）=>{
开关（action.actionType）{
“行动一开始”案例：
_isActionOneStarting=true；
_isActionOneSuccess=false；
emitChange（）；
打破
“行动一成功”案例：
_isActionOneStarting=false；
_isActionOneSuccess=true；
_actionOnePayload=action.payload；
emitChange（）；
打破
案例“行动一个错误”：
_isActionOneStarting=false；
_isActionOneSuccess=false；
_actionOnePayload=null；
_actionOneError=action.error
emitChange（）；
打破
违约：
打破
}
});
module.exports=ModelStore；
//YourComponent.js
从“React”导入React，{Component}；
从“../../actions/ModelActions”导入ModelActions；
从“../../stores/ModelStore”导入ModelStore；
导出默认类YourComponent扩展组件{
componentDidMount（）{
ModelStore.addChangeListener（this.\u onStoreChange）；
ModelActions.actionOne（）；
}
组件将卸载（）{
ModelStore.removeChangeListener（此为存储更改）；
}
render（）{
返回(
);
}
_onStoreChange（）{
这是我的国家({
正在启动：ModelStore.actionOneStarting（），
成功：ModelStore.actionOneSuccess（），
错误：ModelStore.getActionOneError（），
有效负载：ModelStore.getActionOnePayload（）
}, () => {
//在这里，组件将在动作到达时立即作出反应
//不管调度了多少个操作
});
}
}

总之，您可以根据需要调度任意多个操作，对这些操作感兴趣的每个存储都必须有一个捕捉该操作的开关，对更改做出反应并发出更改，这同样适用于组件，组件必须开始侦听所有需要的存储

现在让我们看一下使用Redux的效果：

//YourComponent.js
从“React”导入React，{Component}；
从'react redux'导入{connect}；
从“../actions/ModelActions”导入ModelActions；
导出默认类YourComponent扩展组件{
componentDidMount（）{
this.props.actionOne（）；
}
render（）{
返回(
//您不需要再更改状态，只需基于道具进行渲染即可
);
}
}
常量mapStateToProps=状态=>{
返回{
开始：state.model.starting，
成功：state.model.success，
错误：state.model.error，
有效载荷：state.model.payload，
}
}
const mapDispatchToProps=调度=>{
返回{
actionOne:（）=>ModelActions.actionOne（）（dispatch）//这里有一个小技巧，寻找[redux thunk](https://github.com/gaearon/redux-thunk)
}
}
导出默认连接（MapStateTrops、mapDispatchToProps）（您的组件）；
//ModelActions.js
导出函数模型操作（参数）{
返回调度=>{
分派（{type:'ACTION_ONE_start'}）；
获取（'uri'，…参数）
。然后（resp=>{
分派（{type:'ACTION_ONE_SUCCESS'，负载：resp}）；
})
.catch（（错误）=>{
分派（{type:'ACTION\u ONE\u ERROR'，负载：ERROR.message}）；
});
}
}
//model.js
有限公司