Redux中connect

connect把 React 组件和 Redux 的 store 真正连接起来


层层剥茧一点一点去探究connect究竟做了什么,首先看它的四个参数:

mapStateToProps,mapDispatchToProps,mergeProps和options。

mapStateToProps(state, ownProps) : stateProps

mapStateToProps是一个函数。它的作用就是像它的名字那样,建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系。
如果定义了该参数,组件将会监听 Redux store 的变化。简而言之,只要组件的store发生了变化,就一定会调用该方法。而且,该函数返回的是一个纯对象。

mapDispatchToProps(dispatch, ownProps): dispatchProps

它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象。将 action 作为 props 绑定到 MyComp 上.

[mergeProps(stateProps, dispatchProps, ownProps): props]

mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。
通常情况下,你可以不传这个参数,connect 就会使用 Object.assign 替代该方法。

[options]

如果指定这个参数,可以定制 connector 的行为。但在实际用到的比较少。


概念图:

Redux中connect_第1张图片
connection.jpg

demo

你可能感兴趣的:(Redux中connect)