鏈接React和Redux

也能夠在這裏看：http://leozdgao.me/reacthe-reduxde-qiao-jie-react-redux/

以前一直在探索React相關的東西，手上有個SPA項目，因而準備上Redux試試水。Redux自己和React並無之間的關聯，它是一個通用Javscript App模塊，用作App State的管理。要在React的項目中使用Redux，比較好的方式是藉助react-redux這個庫來作鏈接，這裏的意思是，並非沒有react-redux，這兩個庫就不弄一塊兒用了，而是說react-redux提供了一些封裝，一種更科學的代碼組織方式，讓咱們更舒服地在React的代碼中使用Redux。

以前僅經過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。

好了，詳細看看connect這個模塊作了什麼。先從它的使用來講，它的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()
  }
}

handleChange () {
  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)
  })
)
export default class Main extends Component {

}

OK，結束了。