<h3>connect把 React 组件和 Redux 的 store 真正连接起来</h3>
层层剥茧一点一点去探究connect究竟做了什么,首先看它的四个参数:
<h4>mapStateToProps,mapDispatchToProps,mergeProps和options。</h4>
<h5>mapStateToProps(state, ownProps) : stateProps</h5>
mapStateToProps是一个函数。它的作用就是像它的名字那样,建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系。
如果定义了该参数,组件将会监听 Redux store 的变化。简而言之,只要组件的store发生了变化,就一定会调用该方法。而且,该函数返回的是一个纯对象。
<h5>mapDispatchToProps(dispatch, ownProps): dispatchProps</h5>
它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象。将 action 作为 props 绑定到 MyComp 上.
<h5>[mergeProps(stateProps, dispatchProps, ownProps): props]</h5>
mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。
通常情况下,你可以不传这个参数,connect 就会使用 Object.assign 替代该方法。
<h5>[options] </h5>
如果指定这个参数,可以定制 connector 的行为。但在实际用到的比较少。
概念图: