通過Redux文件來了解react-redux，在一段時間的實踐後準備翻一翻原始碼，順便做些相關的總結。我看的程式碼的npm版本為v4.0.0，也就是說使用的React版本是0.14.x。

react-redux提供兩個關鍵模組：Provider和connect。
Provider
Provider這個模組是作為整個App的容器，在你原有的App Container的基礎上再包上一層，它的工作很簡單，就是接受Redux的store作為props，並將其宣告為context的屬性之一，子元件可以在聲明瞭contextTypes之後可以方便的通過this.context.store訪問到store。不過我們的元件通常不需要這麼做，將store放在context裡，是為了給下面的connect用的。
這個是Provider的使用示例：

// config app root
const history = createHistory()
const root = (
 <Provider store={store} key="provider">
  <Router history={history} routes={routes} />
 </Provider>
)
// render
ReactDOM.render(
 root,
 document.getElementById('root')
)

connect

這個模組是算是真正意義上連線了Redux和React，正好它的名字也叫connect。
先考慮Redux是怎麼運作的：首先store中維護了一個state，我們dispatch一個action，接下來reducer根據這個action更新state。

對映到我們的React應用中，store中維護的state就是我們的app state，一個React元件作為View層，做兩件事：render和響應使用者操作。於是connect就是將store中的必要資料作為props傳遞給React元件來render，幷包裝action creator用於在響應使用者操作時dispatch一個action。
從它的使用來說，它的API如下：

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

mapStateToProps是一個函式，返回值表示的是需要merge進props的state。預設值為() => ({})，即什麼都不傳。

(state, props) => ({ }) // 通常會省略第二個引數

mapDispatchToProps是可以是一個函式，返回值表示的是需要merge僅props的actionCreators，這裡的actionCreator應該是已經被包裝了dispatch了的，推薦使用redux的bindActionCreators函式。

(dispatch, props) => ({ // 通常會省略第二個引數
 ...bindActionCreators({
  ...ResourceActions
 }, dispatch)
})

更方便的是可以直接接受一個物件，此時connect函式內部會將其轉變為函式，這個函式和上面那個例子是一模一樣的。
mergeProps用於自定義merge流程，下面這個是預設流程，parentProps值的就是元件自身的props，可以發現如果元件的props上出現同名，會被覆蓋。

(stateProps, dispatchProps, parentProps) => ({
 ...parentProps,
 ...stateProps,
 ...dispatchProps
})

options共有兩個開關：pure代表是否開啟優化，詳細內容下面會提，預設為true，withRef用來給包裝在裡面的元件一個ref，可以通過getWrappedInstance方法來獲取這個ref，預設為false。
connect返回一個函式，它接受一個React元件的建構函式作為連線物件，最終返回連線好的元件建構函式。

• React元件如何響應store的變化？
• 為什麼connect選擇性的merge一些props，而不是直接將整個state傳入？
• pure優化的是什麼？
  我們把connect返回的函式叫做Connector，它返回的是內部的一個叫Connect的元件，它在包裝原有元件的基礎上，還在內部監聽了Redux的store的變化，為了讓被它包裝的元件可以響應store的變化:

trySubscribe() {
 if (shouldSubscribe && !this.unsubscribe) {
  this.unsubscribe = this.store.subscribe(::this.handleChange)
  this.handleChange()
 }
}//歡迎加入全棧開發交流圈一起學習交流：864305860
handleChange () {//面向1-3年前端人員
 this.setState({//幫助突破技術瓶頸，提升思維能力
  storeState: this.store.getState()
 })
}

我們connect的是某個Container元件，它並不承載所有App state，然而我們的handler是響應所有state變化的，於是我們需要優化的是：當storeState變化的時候，僅在我們真正依賴那部分state變化時，才重新render相應的React元件，那麼什麼是我們真正依賴的部分？就是通過mapStateToProps和mapDispatchToProps得到的。

具體優化的方式就是在shouldComponentUpdate中做檢查，如果只有在元件自身的props改變，或者mapStateToProps的結果改變，或者是mapDispatchToProps的結果改變時shouldComponentUpdate才會返回true，檢查的方式是進行shallowEqual的比較。
所以對於某個reducer來說：

export default (state = {}, action) => {
 return { ...state } // 返回的是一個新的物件，可能會使元件reRender
 // return state // 可能不會使得元件reRender
}

在connect的時候，要謹慎map真正需要的state或者actionCreators到props中，以避免不必要的效能損失。
最後，根據connect的API我們發現可以使用ES7 decorator功能來配合React ES6的寫法：

@connect(
 state => ({
  user: state.user,
  resource: state.resource
 }),
 dispatch => ({
  ...bindActionCreators({
   loadResource: ResourceActions.load
  }, dispatch)//歡迎加入全棧開發交流圈一起學習交流：864305860
 })//面向1-3年前端人員
)//幫助突破技術瓶頸，提升思維能力
export default class Main extends Component {
}

結語

感謝您的觀看，如有不足之處，歡迎批評指正。