connect 方法

connect 方法具體的作用是將store和組件聯(lián)系在一起，api文檔中有這樣的一句話:

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.

connect 并不會改變它“連接”的組件，而是提供一個經(jīng)過包裹的 connect 組件。 conenct 接受4個參數(shù)，分別是 mapStateToProps，mapDispatchToProps，mergeProps，options

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

• [mapStateToProps(state, [ownProps]): stateProps] (Function)
  改方法允許我們將store中的數(shù)據(jù)作為props綁定到組件中，只要store發(fā)生了bianh就會調(diào)用mapStateToProps方法，mapStateToProps返回的結果必須是一個純對象，這個對象會與組件的 props 合并，例子：

state => ({
  count: state.counter.count
})

// or
const mapStateToProps = (state) => {
  return ({
    count: state.counter.count
  })}

• [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)
  允許我們將 action 作為 props 綁定到組件中，
  如果傳遞的是一個對象，那么每個定義在該對象的函數(shù)都將被當作 Redux action creator，對象所定義的方法名將作為屬性名；每個方法將返回一個新的函數(shù)，函數(shù)中 dispatch 方法會將 action creator 的返回值作為參數(shù)執(zhí)行。這些屬性會被合并到組件的 props 中。

實際上 mapDispatchToProps 就是用于建立組件跟store.dispatch的映射關系,可以是一個object，也可以傳入函數(shù)
如果 mapDispatchToProps 是一個函數(shù)，它可以傳入dispatch,ownProps, 定義UI組件如何發(fā)出 action，實際上就是要調(diào)用 dispatch 這個方法

dispatch => ({
  login: (...args) => dispatch(loginAction.login(..args)),
})

// or
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

• [mergeProps(stateProps, dispatchProps, ownProps): props] (Function)
  如果指定了這個參數(shù)，mapStateToProps() 與 mapDispatchToProps() 的執(zhí)行結果和組件自身的 props 將傳入到這個回調(diào)函數(shù)中。該回調(diào)函數(shù)返回的對象將作為 props 傳遞到被包裝的組件中。你也許可以用這個回調(diào)函數(shù)，根據(jù)組件的 props 來篩選部分的 state 數(shù)據(jù)，或者把 props 中的某個特定變量與 action creator 綁定在一起。如果你省略這個參數(shù)，默認情況下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的結果。

• [options] (Object)
  如果指定這個參數(shù)，可以定制 connector 的行為。

主要需要理解前兩個方法。

參考文檔

Redux中文Connect