Redux中的connect的相关知识点

redux中connect是什么？

connect() 函数将 React 组件连接到 React store。
它向连接的组件提供其需要从 store 中获取的数据片段，以及可以用来向 store dispatch actions 的功能。

connect是高阶组件，接受两个方法，返回的函数接收参数是组件，从而返回一个新的组件。

如下：

connect([mapStateToProps], [mapDispatchToProps])(component)

Redux中的connect有什么作用？

connect负责连接React和Redux

connect作用是让你把组件和store连接起来，产生一个新的组件（connect 是高阶组件）

• 获取state

  connect 通过 context获取 Provider 中的 store，通过 store.getState() 获取整个store tree 上所有state

• 包装原组件
  将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对象 Connect，Connect重新 render 外部传入的原组件 WrappedComponent ，并把 connect 中传入的 mapStateToProps，mapDispatchToProps与组件上原有的 props 合并后，通过属性的方式传给 WrappedComponent

• 监听store tree变化

  connect缓存了store tree中state的状态，通过当前state状态 和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发 Connect 及其子组件的重新渲染

redux的connect( )参数

connect接受四个参数

• mapStateToProps?: Function
• mapDispatchToProps?: Function | Object
• mergeProps?: Function （不常用）
• options?: Object (不常用)

mapStateToProps 和 mapDispatchToProps 分别处理 Redux store 的 state 和 dispatch。state 和 dispatch 将作为第一个参数提供给 mapStateToProps 或 mapDispatchToProps 函数。

connect工作流程

Provider组件，在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
接收Redux的store作为props，通过context对象传递给子孙组件上的connect

它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件

详解查看官方文档