connect
doesn't do anything to the original component, rather it is the implementation of the High Order Component pattern: so it that takes a React component as an argument and returns another component by the performing the actions it need to do like providing the action creators and the state as props.
So when you return the component returned by dispatch, you actually return the correct component. The component that you pass to connect
doesn't have the redux state and action creators
available to it.
So you could think of connect to be written somthing like
const connect = (mapStateToProps, mapDispatchToProps) => {
return (WrappedComponent) => {
return class App extends React.Component {
{/* some lifecycle optimizations here */}
render() {
return (
<WrappedComponent {...this.props} {...mapStateToProps()} {...mapDispatchToProps()} />
)
}
}
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…