React 實踐心得：react-redux 之 connect 方法詳解

轉載注：

• 本文做者是淘寶前端團隊的葉齋。筆者很是喜歡這篇文章，故從新排版並轉載到這裏，同時也加入了一些本身的體會。
• 原文地址：http://taobaofed.org/blog/201...

Redux 是「React 全家桶」中極爲重要的一員，它試圖爲 React 應用提供「可預測化的狀態管理」機制。Redux 自己足夠簡單，除了 React，它還可以支持其餘界面框架。因此若是要將 Redux 和 React 結合起來使用，就還須要一些額外的工具，其中最重要的莫過於 react-redux 了。

react-redux 提供了兩個重要的對象，Provider和connect，前者使React組件可被鏈接（connectable），後者把 React 組件和 Redux 的 store 真正鏈接起來。react-redux 的文檔中，對connect的描述是一段晦澀難懂的英文，在初學 redux 的時候，我對着這段文檔閱讀了好久，都沒有所有弄明白其中的意思（大概就是，單詞我都認識，連起來啥意思就不明白了的感受吧）。

在使用了一段時間 redux 後，本文嘗試再次回到這裏，給這段文檔一個靠譜的解讀。

預備知識

首先回顧一下 redux 的基本用法。若是你尚未閱讀過 redux 的文檔，你必定要先去閱讀一下。

const reducer = (state = {count: 0}, action) => {
  switch (action.type){
    case 'INCREASE': return {count: state.count + 1};
    case 'DECREASE': return {count: state.count - 1};
    default: return state;
  }
}

const actions = {
  increase: () => ({type: 'INCREASE'}),
  decrease: () => ({type: 'DECREASE'})
}

const store = createStore(reducer);

store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(actions.increase()) // {count: 1}
store.dispatch(actions.increase()) // {count: 2}
store.dispatch(actions.increase()) // {count: 3}

經過reducer建立一個store，每當咱們在store上dispatch一個action，store內的數據就會相應地發生變化。

咱們固然能夠直接在 React 中使用 Redux：在最外層容器組件中初始化store，而後將state上的屬性做爲props層層傳遞下去。

class App extends Component{

  componentWillMount(){
    store.subscribe((state)=>this.setState(state))
  }

  render(){
    return (
      <Comp
        state={this.state}
        onIncrease={()=>store.dispatch(actions.increase())}
        onDecrease={()=>store.dispatch(actions.decrease())}
      />
    )
  }
}

轉載注：

• 另外一種方法，在入口文件index.js中初始化store，並將其export出來，而後import到定義組件的文件中去。

但這並非最佳的方式。最佳的方式是使用 react-redux 提供的Provider和connect方法。

使用 react-redux

首先在最外層容器中，把全部內容包裹在Provider組件中，將以前建立的store做爲prop傳給Provider。

const App = () => {
  return (
    <Provider store={store}>
      <Comp/>
    </Provider>
  )
};

Provider內的任何一個組件（好比這裏的Comp），若是須要使用state中的數據，就必須是「被 connect 過的」組件——使用connect方法對「你編寫的組件（MyComp）」進行包裝後的產物。

class MyComp extends Component {
  // content...
}

const Comp = connect(...args)(MyComp);

可見，connect方法是重中之重。

connect

究竟connect方法到底作了什麼，咱們來一探究竟。

首先看下函數的簽名：

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

connect()接收四個參數，它們分別是mapStateToProps，mapDispatchToProps，mergeProps和options。

mapStateToProps

mapStateToProps(state, ownProps) : stateProps

這個函數容許咱們將store中的數據做爲props綁定到組件上。

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

這個函數的第一個參數就是 Redux 的store，咱們從中摘取了count屬性。由於返回了具備count屬性的對象，因此MyComp會有名爲count的props字段。

class MyComp extends Component {
  render(){
    return <div>計數：{this.props.count}次</div>
  }
}

const Comp = connect(...args)(MyComp);

固然，你沒必要將state中的數據原封不動地傳入組件，能夠根據state中的數據，動態地輸出組件須要的（最小）屬性。

const mapStateToProps = (state) => {
  return {
    greaterThanFive: state.count > 5
  }
}

函數的第二個參數ownProps，是MyComp本身的props。有的時候，ownProps也會對其產生影響。好比，當你在store中維護了一個用戶列表，而你的組件MyComp只關心一個用戶（經過props中的userId體現）。

const mapStateToProps = (state, ownProps) => {
  // state 是 {userList: [{id: 0, name: '王二'}]}
  return {
    user: _.find(state.userList, {id: ownProps.userId})
  }
}

class MyComp extends Component {
  
  static PropTypes = {
    userId: PropTypes.string.isRequired,
    user: PropTypes.object
  };
  
  render(){
    return <div>用戶名：{this.props.user.name}</div>
  }
}

const Comp = connect(mapStateToProps)(MyComp);

當state變化，或者ownProps變化的時候，mapStateToProps都會被調用，計算出一個新的stateProps，（在與ownProps merge 後）更新給MyComp。

這就是將 Redux store中的數據鏈接到組件的基本方式。

轉載注：

• 什麼叫作「MyComp本身的props」？假設在不使用 react-redux 的時候，MyComp的父組件是ParentComp，那麼上文中的ownProps是ParentComp傳遞給MyComp的所有屬性（對於下文中的方法mapDispatchToProps亦同）。也就是說，ownProps與 Redux 的store與state徹底無關。
• 方法mapStateToProps爲MyComp添加的屬性，不可能被方法mapDispatchToProps訪問到，反之亦然。由於，這涉及到 render 的時機和順序的問題，筆者在這上面踩過至關多的坑。至於筆者爲何有這種需求，由於筆者設計了一個按鈕，功能是：在點擊後，根據當前的 state 計算出下一個 state，並更新。在經歷了無數error之後，筆者終於意識到：react-redux 根本就不是設計用來解決這類問題的。解決方案有兩種：一是，在設計 reducer 的時候，就直接根據 state 更新；二是，導入全局store並使用 store.getState() 得到當前state，而後根據這個state進行更新。
• 另外，若是使用PropTypes對MyComp作屬性類型檢查，方法mapStateToProps和方法mapDispatchToProps爲MyComp添加的屬性是存在的。

mapDispatchToProps

mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 的第二個參數是mapDispatchToProps，它的功能是，將action做爲props綁定到MyComp上。

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

class MyComp extends Component {
  render(){
    const {count, increase, decrease} = this.props;
    return (<div>
      <div>計數：{this.props.count}次</div>
      <button onClick={increase}>增長</button>
      <button onClick={decrease}>減小</button>
    </div>)
  }
}

const Comp = connect(mapStateToProps， mapDispatchToProps)(MyComp);

因爲mapDispatchToProps方法返回了具備increase屬性和decrease屬性的對象，這兩個屬性也會成爲MyComp的props。

如上所示，調用actions.increase()只能獲得一個action對象{type:'INCREASE'}，要觸發這個action必須在store上調用dispatch方法。dispatch正是mapDispatchToProps的第一個參數。可是，爲了避免讓 MyComp 組件感知到dispatch的存在，咱們須要將increase和decrease兩個函數包裝一下，使之成爲直接可被調用的函數（即，調用該方法就會觸發dispatch）。

Redux 自己提供了bindActionCreators函數，來將action包裝成直接可被調用的函數。

import {bindActionCreators} from 'redux';

const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    increase: action.increase,
    decrease: action.decrease
  });
}

一樣，當ownProps變化的時候，該函數也會被調用，生成一個新的dispatchProps，（在與stateProps和ownProps merge 後）更新給MyComp。注意，action的變化不會引發上述過程，默認action在組件的生命週期中是固定的。

轉載注：

• 函數connect甚至react-redux的核心在於：將 Redux 中 store 的 state 綁定到組件的屬性上，使得對 state 的修改可以直接體現爲組件外觀的更改。所以，參數mapStateToProps是很是重要的，可是參數mapDispatchToProps則比較多餘——由於簡單粗暴地導入全局 store 一樣能達到相同的目的（事實上筆者就是這麼作的）。

mergeProps

[mergeProps(stateProps, dispatchProps, ownProps): props]

以前說過，不論是stateProps仍是dispatchProps，都須要和ownProps merge 以後纔會被賦給MyComp。connect的第三個參數就是用來作這件事。一般狀況下，你能夠不傳這個參數，connect就會使用Object.assign替代該方法。

其餘

最後還有一個options選項，比較簡單，基本上也不大會用到（尤爲是你遵循了其餘的一些 React 的「最佳實踐」的時候），本文就略過了。但願瞭解的同窗能夠直接看文檔。

（完）