connect()是react-redux中的核心方法之一，它將react組件預redux中的Store真正連接在一起
組件
React-Redux將所有組件分為兩大類：展示組件（UI組件）好芭，容器組件
展示組件有以下幾個特征：
只負責 UI 的呈現(xiàn)铁坎，不帶有任何業(yè)務邏輯
沒有狀態(tài)（即不使用this.state這個變量）
所有數(shù)據(jù)都由參數(shù)（this.props）提供
不使用任何 Redux 的 API
容器組件有以下幾個特征：
負責管理數(shù)據(jù)和業(yè)務邏輯，不負責 UI 的呈現(xiàn)
帶有內(nèi)部狀態(tài)
使用 Redux 的 API
總結(jié)為一點：** 展示組件負責 UI 的呈現(xiàn)犯祠，容器組件負責管理數(shù)據(jù)和邏輯**
connect方法解析
下圖是connect()的概念圖
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ù)必須返回一個純對象忆某，該對象會與相應展示組件的 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ù)都將被當作
Redux action creator聋呢，而且這個對象會與Redux store綁定在一起苗踪，其中所定義的方法名將作為屬性名，合并到組件的props中; - 如果傳遞的是一個函數(shù)坝冕，該函數(shù)將接收一個 dispatch 函數(shù)徒探，然后由你來決定如何返回一個對象瓦呼，這個對象通過 dispatch 函數(shù)與 action creator 以某種方式綁定在一起
- 如果傳遞的是一個對象，那么每個定義在該對象的函數(shù)都將被當作
關于connect（）簽名的詳細解釋可以看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
}
}
詳細代碼請看：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
