connect()是react-redux中的核心方法之一，它將react組件預(yù)redux中的Store真正連接在一起

組件

React-Redux將所有組件分為兩大類：展示組件（UI組件），容器組件

展示組件有以下幾個特征：

只負(fù)責(zé) UI 的呈現(xiàn)，不帶有任何業(yè)務(wù)邏輯
沒有狀態(tài)（即不使用this.state這個變量）
所有數(shù)據(jù)都由參數(shù)（this.props）提供
不使用任何 Redux 的 API

容器組件有以下幾個特征：

負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé) UI 的呈現(xiàn)
帶有內(nèi)部狀態(tài)
使用 Redux 的 API

總結(jié)為一點：** 展示組件負(fù)責(zé) UI 的呈現(xiàn)，容器組件負(fù)責(zé)管理數(shù)據(jù)和邏輯**

connect方法解析

下圖是connect()的概念圖

react-redux connect - connect是什么.jpg

connect（）簽名
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

參數(shù)

[mapStateToProps(state, [ownProps]): stateProps] (Function):

• mapStateToProps必須是一個Function,作用是綁定state的指定值到props上
• state: 監(jiān)聽Redux store的變化。任何時候只要 Redux store發(fā)生改變，mapStateToProps 函數(shù)就會被調(diào)用,該回調(diào)函數(shù)必須返回一個純對象，該對象會與相應(yīng)展示組件的 props 合并。
• ownProps: 該參數(shù)的值為傳遞到組件的 props，而且只要組件接收到新的props，mapStateToProps 也會被調(diào)用

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

• mapDispatchToProps可以是一個Function，也可以是Object,作用是綁定action創(chuàng)建函數(shù)到props上
• dispatch:
  • 如果傳遞的是一個對象，那么每個定義在該對象的函數(shù)都將被當(dāng)作Redux action creator，而且這個對象會與 Redux store綁定在一起，其中所定義的方法名將作為屬性名，合并到組件的 props 中;
  • 如果傳遞的是一個函數(shù)，該函數(shù)將接收一個 dispatch 函數(shù)，然后由你來決定如何返回一個對象，這個對象通過 dispatch 函數(shù)與 action creator 以某種方式綁定在一起

關(guān)于connect（）簽名的詳細(xì)解釋可以看API文檔

connect（）實例

以計數(shù)器為例

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中的數(shù)據(jù)和actions中的方法綁定到props上

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

reducers/count.js

import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/count'

//reducer其實也是個方法而已,參數(shù)是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
    }
}

詳細(xì)代碼請看：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