connect()是react-redux中的核心方法之一，它将react组件预redux中的Store真正连接在一起
组件
React-Redux将所有组件分为两大类：展示组件（UI组件），容器组件
展示组件有以下几个特征：
只负责 UI 的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API
容器组件有以下几个特征：
负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API
总结为一点：** 展示组件负责 UI 的呈现，容器组件负责管理数据和逻辑**
connect方法解析
下图是connect()的概念图
connect（）签名
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
参数
[mapStateToProps(state, [ownProps]): stateProps] (Function):
-
mapStateToProps必须是一个Function,作用是绑定state的指定值到props上 -
state: 监听Redux store的变化。任何时候只要Redux store发生改变，mapStateToProps函数就会被调用,该回调函数必须返回一个纯对象，该对象会与相应展示组件的 props 合并。 -
ownProps: 该参数的值为传递到组件的props，而且只要组件接收到新的props，mapStateToProps也会被调用
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)
-
mapDispatchToProps可以是一个Function，也可以是Object,作用是绑定action创建函数到props上 -
dispatch:- 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作
Redux action creator，而且这个对象会与Redux store绑定在一起，其中所定义的方法名将作为属性名，合并到组件的props中; - 如果传递的是一个函数，该函数将接收一个 dispatch 函数，然后由你来决定如何返回一个对象，这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起
- 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作
关于connect（）签名的详细解释可以看API文档
connect（）实例
以计数器为例
component/count.js
import React, { Component } from 'react'
class Counter extends Component {
increment(){
this.props.onAdd();
}
decrement(){
this.props.onCut();
}
render() {
return (
<p>
Clicked: {this.props.counter} times
{' '}
<button onClick={this.increment.bind(this)}>+</button>
{' '}
<button onClick={this.decrement.bind(this)}>-</button>
</p>
)
}
}
export default Counter;
containers/count.js
import {connect} from 'react-redux'
import Counter from '../component/count'
//将state绑定到props的counter
const mapStateToProps = (state)=> {
console.log(state);
return {
counter: state
}
};
//将action的所有方法绑定到props上
const mapDispatchToProps = (dispatch) => {
return {
onAdd: ()=> {
dispatch({type: "INCREMENT_COUNTER"});
},
onCut: ()=> {
dispatch({type: "DECREMENT_COUNTER"});
}
};
};
//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
export default connect(mapStateToProps, mapDispatchToProps)(Counter)
reducers/count.js
import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/count'
//reducer其实也是个方法而已,参数是state和action,返回值是新的state
export default function counter(state = 0, action) {
switch (action.type) {
case INCREMENT_COUNTER:
return state + 1;
case DECREMENT_COUNTER:
return state - 1;
default:
return state
}
}
详细代码请看：https://github.com/yhl221/react-redux-counter
更多示例请看：React+Redux系列教程
参考资料：
https://segmentfault.com/a/1190000006196949
http://cn.redux.js.org/docs/react-redux/api.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
http://www.cnblogs.com/lewis617/p/5145073.html
http://www.cnblogs.com/hhhyaaon/p/5863408.html
源码解析：https://my.oschina.net/997155658/blog/709155
