解密react组件中的导出默认连接语句

Question

我正试图找出一个使用React、Redux和Redux-Saga的内部web项目。

有一个React组件似乎比项目的其他部分复杂得多，我只是不知道到底发生了什么

我在试图破解代码块底部的导出默认连接语句中发生的事情时失败了。

具体来说，我看到这两个对象/事物正在作为道具传递给VehicleFuelType组件：

• on反应
• on配置推进
• fuelType

但是我没有看到导出默认连接语句中的那些对象发生了什么。

我已经阅读了一堆redux文档，但它对我来说仍然是个谜

如果有人知道这个代码块中实际发生了什么，你能分享一下吗？

谢谢！

class vehicleDisplay extends React.Component {
componentDidMount() {
this.props.onConfigurePropulsion();
}
render() {
return (
<div>
{fuelType.valueSeq().map(f =>
<div>    
<VehiclefuelType
key={f.id}
fuelType={f}
reaction={reactions.find(r => r.fuelTypeId === f.id)}
onReaction={!fatalReaction ? () => onReaction(f.id) : () => null}
/>
</div>
</div>
)
}
export default connect(
(state, { propulsionId, currentVehicleId }) => ({
propulsion: state.propulsions.get(propulsionId),
fuelTypes: state.fuelTypes.filter(f => f.propulsionId === propulsionId),
reactions: state.reactions.filter(r => r.propulsionId === propulsionId),
}),
(dispatch, { propulsionId }) => ({
onConfigurePropulsion: () => dispatch(Actions.configurePropulsion(propulsionId)),
onReaction: (fuelTypeId) => dispatch(Actions.saveReaction(propulsionId, alternativeId))
})
)(vehicleDisplay)

Answer 1

connect接受两个参数mapStateToProps和mapDispatchToProps。这些通常被分离成自己的变量，但这个人是内联的。这里的第一个参数是从状态中检索值，并将它们放入组件的props中。第二个是为redux操作设置调度，然后也可以通过props访问这些调度。更多信息可以在这里找到。