react-redux 中connect详解

connect的作用

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(MyComponent)

connect是连接React组件与Redux store，建立组件与store.state和dispatch的映射关系。连接操作不会改变原来的组件类。返回一个新的已于Redux store连接的组件类。

mapStateToProps

• mapStateToProps是一个函数，用于建立组件和store.state的映射关系
• 如果定义了该参数，组件将会监听redux store的变化。只要redux store发生变化，mapStateToProps函数就会被调用。
• 如果没有定义该参数，组件将不会监听redux store的变化。
• 函数原型mapStateToProps（状态，[ownProps]）：stateProps。
  • mapStateToProps可以接收两个参数
  • 参数1：state接收redux store的状态
  • 参数2：ownProps是传递到该组件的道具
  • 如果指定了第二个参数ownProps，当props发生变化时，mapStateToProps函数也会被调用
• mapStateToProps的返回值是一个纯对象，这个对象与该组件的props合并。

mapDispatchToProps

• mapDispatchToProps用于建立组件和store.dispatch的映射关系
• mapDispatchToProps可以是对象或函数
• mapDispatchToProps是对象
  •  定义在该对象上的函数将作为Redux actions creators。将动作创建者作为dispatch参数，返回一个新的函数。
  • 对象上的函数名作为属性名.dispatch（actions creators）作为属性值。组成新的对象与该组件的props合并。
• mapDisatchToProps是函数
  • 如果传递的是一个函数mapDispatchToProps（dispatch，[ownProps]）
  • 该函数接受两个参数dispatch和ownProps
  • 返回值是一个对象，该对象是通过调度函数与actionCreator以某种方式绑定在一起的。可以使用终极版的辅助函数bindActionCreators（）
  • 如果省略mapDispatchToProps参数，默认情况下，调度会注入到组件的道具中
  • 如果指定的ownProps参数，该参数的值为传递到组件的道具，当组件接受新的道具时，mapDispatchToProps也会被调用

mergeProps

• mergeProps（stateProps，dispatchProps，ownProps）：props

• 如果指定了这个参数，mapStateToProps（）与mapDispatchToProps（）的执行结果和组件自身的props将传入到这个回调函数中。

• 该回调函数返回的对象将作为props传递到被包装的组件中。

• 你也许可以用这个回调函数，根据组件的props来筛选部分的州数据，或者把道具中的某个特定变量与行动创造者绑定在一起。

• 如果你省略这个参数，默认情况下返回Object.assign（{}，ownProps，stateProps，dispatchProps）的结果。