React-Redux

序

Redux的做者友情贊助，封裝了一個 React 專用的庫 React-Redux，爲 React + Redux 提供了一種更科學的代碼組織方式。

本人認爲React-Redux的中心思想就是實現Model與View的分離。它將全部組件分紅兩大類：

• UI組件（View層）

  • 只負責 UI 的呈現，不帶有任何業務邏輯
  • 沒有狀態（即不使用this.state這個變量）
  • 全部數據都由參數（this.props）提供
  • 不使用任何 Redux 的 API

• 容器組件（Model層）

  • 負責管理數據和業務邏輯，不負責 UI 的呈現
  • 帶有內部狀態
  • 使用 Redux 的 API

這樣以來也實現了Redux和React分離，UI組件只要書寫react的代碼，容器組件只負責書寫redux相關操做，易於書寫與維護。

react-redux主要提供了倆個關鍵API：Provider組件 和 connect函數。

connect()

connect函數的主要功能是鏈接 UI組件 與 容器組件。它會自動爲您的UI組件生成一個容器組件，而且創立起它們之間的通訊。

const ContainerComponent = connect(
    mapStateToProps,
    mapDispatchToProps
)(UIComponent);

上面代碼中，UIComponent是 UI組件，containerComponent就是由 React-Redux 經過connect方法自動生成的容器組件。而 mapStateToProps 和 mapDispatchToProps 則創建起了倆種組件之間的通訊機制。

mapStateToProps（可選參數）

mapStateToProps(state,[ownProps])

• state: state數據
• ownProps: 可選參數，容器組件的props對象，使用ownProps做爲參數後，若是容器組件的參數發生變化，也會引起 UI 組件從新渲染。

這個函數的主要功能是將state經過props屬性傳遞給UI組件，它會訂閱 Store，每當state更新的時候，就會自動執行，從新計算 UI 組件的參數，從而觸發 UI 組件的從新渲染。

mapStateToProps函數返回一個對象，這個對象中的每個鍵值對都會映射到UI組件的props上。

const mapStateToProps = (state) => {
  return {
    data: state
  }
}

上面的 mapStateToProps 函數將state傳遞給了UI組件的props屬性，您能夠在UI組件內經過this.props.data來訪問state。這樣就實現了容器組件向UI組件方向上的數據傳遞。

mapDispatchToProps（可選參數）

mapDispatchToProps能夠是一個函數，也能夠是一個對象。

做爲函數，mapDispatchToProps 會獲得 dispatch 和 ownProps 倆個參數，而且返回一個對象。

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    click: () => {
        //  能夠進行dispatch操做，發出action
    }
  };
}

上面的mapDispatchToProps函數會返回一個對象，這個對象的鍵值依舊會傳遞給UI組件的props，在UI組件內部，您能夠經過this.props.click來調用這個函數。

Provider 組件

Provider 組件主要做爲整個應用的容器，用來傳遞store給connct所生成的容器組件。

<Provider store={store}>
    <ContainerComponent />
</Provider>

上面代碼中，Provider在根組件外面包了一層，這樣一來，App的全部子組件就默認均可以拿到state了。

源碼：

class Provider extends Component {
  getChildContext() {
    return {
      store: this.props.store
    };
  }
  render() {
    return this.props.children;
  }
}

Provider.childContextTypes = {
  store: React.PropTypes.object
}

解釋上面的代碼以前先解釋下 context 和 contextTypes，

• context：同state、props同樣都是 React 的數據載體，但它能夠實現組件間跨級傳遞數據
• contextTypes： 在組件上指定後指定該屬性後，方可訪問該組件context的屬性
• getChildContext： 在須要向下傳遞數據的父組件中使用，用於指定傳遞的數據，
• childContextTypes： 在組件上指定後指定該屬性後，方可傳遞該組件context的屬性

也就是說：指定數據並要將數據傳遞下去的父組件要定義 childContextTypes 和 getChildContext() ；想要接收到數據的子組件 必須定義 contextTypes 來使用傳遞過來的 context 。

因此，上面代碼的意思就是：Provider組件經過getChildContext方法指定向下傳遞的數據爲store，並經過childContextType屬性使該屬性得以傳遞。Provider的子組件能夠經過this.context取到數據。