React-Redux 源碼解析系列 -- React-Redux的做用

前面的章節講完了redux的部分，又已經有了react,那爲何還須要有React-Redux呢？這個React-Redux 又幫助咱們作了什麼呢？

context 跟 store

先來想一個問題，若是光使用react，有時候會遇到一個組件的狀態要在另外一個組件中用到，這時候就須要把這個狀態提高。可是咱們不能沒完沒了的提高呀，因此react就有了一個context，這樣整個app均可以訪問到這個值。

可是用context是不安全的，由於任何組件均可以改變它。怎麼辦？立刻用亮甲？

方法

因此咱們須要redux這個專業的狀態管理框架來幫忙，而redux的核心就是發明了store，經過dispatch一個action 來改變store裏的值，若是用redux來管理咱們的狀態，就能夠解決上述問題~

誰來鏈接react, redux? 這時候react-redux就閃閃出現了，它的做用就是鏈接react跟redux。

how to

一、在最頂層的react組件裏，將redux的store定義爲context，這樣全部的子組件經過this.context.store 均可以共享store裏的狀態。

static childContextTypes = {
    store: PropTypes.object
  }

  getChildContext () {
     return { store }
  }

二、每一個須要訪問store的子組件裏，在componentWillMount的時候作兩件事

• 經過this.context.store拿到本身想要的值，而後setState保存這個狀態。

• 經過store的subscribe 訂閱listner -- render function,在每次狀態更新的時候
  都會從新渲染。

栗子：

static contextTypes = {
    store: PropTypes.object
  }

  constructor () {
    super()
    this.state = { themeColor: '' }
  }

  componentWillMount () {
    this._updateThemeColor()
    store.subscribe(() => this._updateThemeColor())
  }

  _updateThemeColor () {
    const { store } = this.context
    const state = store.getState()
    this.setState({ themeColor: state.themeColor })
  }

到這一步，能夠說react，跟redux就聯繫上了，實際就是context跟store的結合。

可是目前的代碼仍是有問題的：

• 全部須要獲取狀態的字組件都須要重複上面的邏輯，顯然很是麻煩

• 子組件對於context的依賴太強，形成可複用性差，若是我要在沒有context的地方使用它，就用不了了

首先說第一個問題：這個問題能夠經過把共同的邏輯都放在高階組件裏解決。高階組件新包裝的組件跟原來的組件經過props傳遞信息。

第二個問題：說解決方法以前，先來探討一下什麼是可複用性高的組件：一個組件只依賴於傳入的props還有自身的State來渲染，而不依賴與外部的任何數據，也就是咱們常說的純組件（也叫Dumb Component），它除了給它傳的props，對外面的數據都不聞不問，給它什麼，它就渲染什麼。

注：因此在寫組件的時候，也要多寫Dumb component哦~

說到這裏，思路就變得清晰了，咱們要的就是經過高階組件去獲取store裏的值，經過props傳給下面的子組件。

屏幕快照 2017-11-18 下午5.57.22

講到這裏，就能夠回答開篇的問題了~

其實React-Redux 提供了兩個接口，provider跟connect

• provider是幫助咱們把store設置爲childContext的

• connect就是高階組件，它負責去獲取store的值，經過props傳給下面的子組件，同時訂閱組件的渲染事件

最後，本文實際上是堆參考文檔的連接作的一個總結，想去看完整版能夠戳下面~

參考文檔：
http://huziketang.com/books/r...