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()的概念圖

可以簡單歸納為以下幾點：

• 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（）簽名的詳細解釋可以看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
    }
}