小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
系列文章
react-redux 学习笔记（一）Provider
react-redux 学习笔记（二）connect 用法
react-redux 学习笔记（三）connect API 原理分析
connect
作用：在每一次 state 变化之后，用新的 store tree 重新渲染组件。
connect 函数接收 4 个参数：
mapStateToProps
参数为整个 store tree，返回值为需要 merge 进 props 的 state。
mapDispatchToProps
参数为整个 store.dispatch()，返回值为需要 merge 进 props 的 action。
mergeProps
将前面两个函数的返回值，加上自定义的属性，合并到一起，挂到容器组件的 this props 上。
注意： 如果写了第三个参数，前两个参数返回的值将不会直接被挂到 this.props 上，所以第三个参数需要返回正确的值。
options
是否开启优化，默认值为 true。
connect 在容器组件中的用法：
function mapStateToProps(state) {
const { isFetching, objectTypes } = state.rootData.objectGroup || {
isFetching: true,
objectTypes: []
}
return { isFetching, objectTypes }
}
function mapDispatchToProps(dispatch) {
const actionCreators = Object.assign({}, objectsTypeActionCreators);
return bindActionCreators(actionCreators, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(CRMPage);
从 connect 的用法可以看出，这里 connect 接收了两个参数，分别处理 state 和 action，最终返回一个组件。最终 export 出去的不是最初定义的 React 组件，是用 connect 包裹之后的组件。所以 connect 做的事主要有：
- 返回一个 React 组件，将函数传入的参数（state，action）放入 this.props 下。
- 在组件结构加载完成后注册监听器，在组件卸载时注销监听器。监听器的作用是捕捉每一次 state 的更新。
以上是本文全部内容，欢迎点赞和评论～
