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

Question

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

有一个 React 组件似乎比项目的其余部分复杂得多，我就是搞不懂到底发生了什么。

我在尝试破译代码块底部的 export default connect 语句 中发生的事情时失败得很惨。

具体来说，我看到这两个 objects/things 作为道具传递给 VehicleFuelType 组件：

反应
onConfigurePropulsion
燃料类型

但是我没看到 export default connect 语句 中的那些对象发生了什么。

我已经阅读了一堆 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 访问。可以找到更多信息 here.

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

deciphering a export default connect statement in a react component

ecmascript-6

reactjs

redux

redux-saga

react-redux