摘要：但這并不是最佳的方式。最佳的方式是使用提供的和方法。也就是說，與的與完全無關(guān)。另外，如果使用對做屬性類型檢查，方法和方法為添加的屬性是存在的。注意，的變化不會引起上述過程，默認(rèn)在組件的生命周期中是固定的。

轉(zhuǎn)載注：

本文作者是淘寶前端團(tuán)隊的葉齋。筆者非常喜歡這篇文章，故重新排版并轉(zhuǎn)載到這里，同時也加入了一些自己的體會。
原文地址：http://taobaofed.org/blog/201...

Redux 是「React 全家桶」中極為重要的一員，它試圖為 React 應(yīng)用提供「可預(yù)測化的狀態(tài)管理」機制。Redux 本身足夠簡單，除了 React，它還能夠支持其他界面框架。所以如果要將 Redux 和 React 結(jié)合起來使用，就還需要一些額外的工具，其中最重要的莫過于 react-redux 了。

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

在使用了一段時間 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創(chuàng)建一個store，每當(dāng)我們在store上dispatch一個action，store內(nèi)的數(shù)據(jù)就會相應(yīng)地發(fā)生變化。

我們當(dāng)然可以直接在 React 中使用 Redux：在最外層容器組件中初始化store，然后將state上的屬性作為props層層傳遞下去。

class App extends Component{

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

  render(){
    return (
      store.dispatch(actions.increase())}
        onDecrease={()=>store.dispatch(actions.decrease())}
      />
    )
  }
}

轉(zhuǎn)載注：
另一種方法，在入口文件index.js中初始化store，并將其export出來，然后import到定義組件的文件中去。

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

首先在最外層容器中，把所有內(nèi)容包裹在Provider組件中，將之前創(chuàng)建的store作為prop傳給Provider。

const App = () => {
  return (
    
      
    
  )
};

Provider內(nèi)的任何一個組件（比如這里的Comp），如果需要使用state中的數(shù)據(jù)，就必須是「被 connect 過的」組件——使用connect方法對「你編寫的組件（MyComp）」進(jìn)行包裝后的產(chǎn)物。

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

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

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

究竟connect方法到底做了什么，我們來一探究竟。

首先看下函數(shù)的簽名：

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

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

mapStateToProps(state, ownProps) : stateProps

這個函數(shù)允許我們將store中的數(shù)據(jù)作為props綁定到組件上。

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

這個函數(shù)的第一個參數(shù)就是 Redux 的store，我們從中摘取了count屬性。因為返回了具有count屬性的對象，所以MyComp會有名為count的props字段。

class MyComp extends Component {
  render(){
    return 
計數(shù)：{this.props.count}次
  }
}

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

當(dāng)然，你不必將state中的數(shù)據(jù)原封不動地傳入組件，可以根據(jù)state中的數(shù)據(jù)，動態(tài)地輸出組件需要的（最小）屬性。

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

函數(shù)的第二個參數(shù)ownProps，是MyComp自己的props。有的時候，ownProps也會對其產(chǎn)生影響。比如，當(dāng)你在store中維護(hù)了一個用戶列表，而你的組件MyComp只關(guān)心一個用戶（通過props中的userId體現(xiàn)）。

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 
用戶名：{this.props.user.name}
  }
}

const Comp = connect(mapStateToProps)(MyComp);

當(dāng)state變化，或者ownProps變化的時候，mapStateToProps都會被調(diào)用，計算出一個新的stateProps，（在與ownProps merge 后）更新給MyComp。

這就是將 Redux store中的數(shù)據(jù)連接到組件的基本方式。

轉(zhuǎn)載注：


什么叫做“MyComp自己的props”？假設(shè)在不使用 react-redux 的時候，MyComp的父組件是ParentComp，那么上文中的ownProps是ParentComp傳遞給MyComp的全部屬性（對于下文中的方法mapDispatchToProps亦同）。也就是說，ownProps與 Redux 的store與state完全無關(guān)。

方法mapStateToProps為MyComp添加的屬性，不可能被方法mapDispatchToProps訪問到，反之亦然。因為，這涉及到 render 的時機和順序的問題，筆者在這上面踩過相當(dāng)多的坑。至于筆者為什么有這種需求，因為筆者設(shè)計了一個按鈕，功能是：在點擊后，根據(jù)當(dāng)前的 state 計算出下一個 state，并更新。在經(jīng)歷了無數(shù)error以后，筆者終于意識到：react-redux 根本就不是設(shè)計用來解決這類問題的。解決方案有兩種：一是，在設(shè)計 reducer 的時候，就直接根據(jù) state 更新；二是，導(dǎo)入全局store并使用 store.getState() 獲得當(dāng)前state，然后根據(jù)這個state進(jìn)行更新。
另外，如果使用PropTypes對MyComp做屬性類型檢查，方法mapStateToProps和方法mapDispatchToProps為MyComp添加的屬性是存在的。

mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 的第二個參數(shù)是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 (

      
計數(shù)：{this.props.count}次
      增加
      減少
    
)
  }
}

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

由于mapDispatchToProps方法返回了具有increase屬性和decrease屬性的對象，這兩個屬性也會成為MyComp的props。

如上所示，調(diào)用actions.increase()只能得到一個action對象{type:"INCREASE"}，要觸發(fā)這個action必須在store上調(diào)用dispatch方法。dispatch正是mapDispatchToProps的第一個參數(shù)。但是，為了不讓 MyComp 組件感知到dispatch的存在，我們需要將increase和decrease兩個函數(shù)包裝一下，使之成為直接可被調(diào)用的函數(shù)（即，調(diào)用該方法就會觸發(fā)dispatch）。

Redux 本身提供了bindActionCreators函數(shù)，來將action包裝成直接可被調(diào)用的函數(shù)。

import {bindActionCreators} from "redux";

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

同樣，當(dāng)ownProps變化的時候，該函數(shù)也會被調(diào)用，生成一個新的dispatchProps，（在與stateProps和ownProps merge 后）更新給MyComp。注意，action的變化不會引起上述過程，默認(rèn)action在組件的生命周期中是固定的。

轉(zhuǎn)載注：
函數(shù)connect甚至react-redux的核心在于：將 Redux 中 store 的 state 綁定到組件的屬性上，使得對 state 的修改能夠直接體現(xiàn)為組件外觀的更改。因此，參數(shù)mapStateToProps是非常重要的，但是參數(shù)mapDispatchToProps則比較多余——因為簡單粗暴地導(dǎo)入全局 store 同樣能達(dá)到相同的目的（事實上筆者就是這么做的）。

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

之前說過，不管是stateProps還是dispatchProps，都需要和ownProps merge 之后才會被賦給MyComp。connect的第三個參數(shù)就是用來做這件事。通常情況下，你可以不傳這個參數(shù)，connect就會使用Object.assign替代該方法。

最后還有一個options選項，比較簡單，基本上也不大會用到（尤其是你遵循了其他的一些 React 的「最佳實踐」的時候），本文就略過了。希望了解的同學(xué)可以直接看文檔。

（完）