connect()是react-redux中的核心方法之一，它将react组件预redux中的Store真正连接在一起

http://www.jianshu.com/p/6bf7ffbcff3b

组件

React-Redux将所有组件分为两大类：展示组件（UI组件），容器组件

展示组件有以下几个特征：

只负责 UI 的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API

容器组件有以下几个特征：

负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API

总结为一点： 展示组件负责 UI 的呈现，容器组件负责管理数据和逻辑

connect方法解析

下图是connect()的概念图

react-redux connect - connect是什么.jpg

可以简单归纳为以下几点：

• mapStateToProps必须是function,作为输入逻辑，
• mapDispatchToProps可以是funciton,也可以是对象，作为输出，

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（）签名的详细解释可以看

connect（）实例

以计数器为例

component/count.js

import React, { Component } from 'react'class Counter extends Component {    increment(){     this.props.onAdd();    }    decrement(){       this.props.onCut();    }    render() {        return (            
                Clicked: {
   this.props.counter} times                {' '}                +                {' '}                -            
        )    }}export default Counter;

containers/count.js

import {connect} from 'react-redux'import Counter from '../component/count'//将state绑定到props的counterconst 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,返回值是新的stateexport default function counter(state = 0, action) {    switch (action.type) {        case INCREMENT_COUNTER:            return state + 1;        case DECREMENT_COUNTER:            return state - 1;        default:            return state    }}

详细代码请看：
更多示例请看：

参考资料：





源码解析：