淺談React和Redux的連接react-redux

之前一直在探索React相關(guān)的東西，手上有個SPA項目，于是準(zhǔn)備上Redux試試水。Redux本身和React并沒有之間的關(guān)聯(lián)，它是一個通用Javscript App模塊，用做App State的管理。要在React的項目中使用Redux，比較好的方式是借助react-redux這個庫來做連接，這里的意思是，并不是沒有react-redux，這兩個庫就不弄一起用了，而是說react-redux提供了一些封裝，一種更科學(xué)的代碼組織方式，讓我們更舒服地在React的代碼中使用Redux。

之前僅通過Redux文檔來了解react-redux，在一段時間的實踐后準(zhǔn)備翻一翻源代碼，順便做些相關(guān)的總結(jié)。我看的代碼的npm版本為v4.0.0，也就是說使用的React版本是0.14.x。

react-redux提供兩個關(guān)鍵模塊：Provider和connect。

Provider

Provider這個模塊是作為整個App的容器，在你原有的App Container的基礎(chǔ)上再包上一層，它的工作很簡單，就是接受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中維護(hù)了一個state，我們dispatch一個action，接下來reducer根據(jù)這個action更新state。

映射到我們的React應(yīng)用中，store中維護(hù)的state就是我們的app state，一個React組件作為View層，做兩件事：render和響應(yīng)用戶操作。于是connect就是將store中的必要數(shù)據(jù)作為props傳遞給React組件來render，并包裝action creator用于在響應(yīng)用戶操作時dispatch一個action。

好了，詳細(xì)看看connect這個模塊做了什么。先從它的使用來說，它的API如下：

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

mapStateToProps是一個函數(shù)，返回值表示的是需要merge進(jìn)props的state。默認(rèn)值為() => ({})，即什么都不傳。

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

mapDispatchToProps是可以是一個函數(shù)，返回值表示的是需要merge僅props的actionCreators，這里的actionCreator應(yīng)該是已經(jīng)被包裝了dispatch了的，推薦使用redux的bindActionCreators函數(shù)。

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

更方便的是可以直接接受一個對象，此時connect函數(shù)內(nèi)部會將其轉(zhuǎn)變?yōu)楹瘮?shù)，這個函數(shù)和上面那個例子是一模一樣的。

mergeProps用于自定義merge流程，下面這個是默認(rèn)流程，parentProps值的就是組件自身的props，可以發(fā)現(xiàn)如果組件的props上出現(xiàn)同名，會被覆蓋。

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

options共有兩個開關(guān)：pure代表是否打開優(yōu)化，詳細(xì)內(nèi)容下面會提，默認(rèn)為true，withRef用來給包裝在里面的組件一個ref，可以通過getWrappedInstance方法來獲取這個ref，默認(rèn)為false。

connect返回一個函數(shù)，它接受一個React組件的構(gòu)造函數(shù)作為連接對象，最終返回連接好的組件構(gòu)造函數(shù)。

然后幾個問題：

1. React組件如何響應(yīng)store的變化？
2. 為什么connect選擇性的merge一些props，而不是直接將整個state傳入？
3. pure優(yōu)化的是什么？

我們把connect返回的函數(shù)叫做Connector，它返回的是內(nèi)部的一個叫Connect的組件，它在包裝原有組件的基礎(chǔ)上，還在內(nèi)部監(jiān)聽了Redux的store的變化，為了讓被它包裝的組件可以響應(yīng)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是響應(yīng)所有state變化的，于是我們需要優(yōu)化的是：當(dāng)storeState變化的時候，僅在我們真正依賴那部分state變化時，才重新render相應(yīng)的React組件，那么什么是我們真正依賴的部分？就是通過mapStateToProps和mapDispatchToProps得到的。

具體優(yōu)化的方式就是在shouldComponentUpdate中做檢查，如果只有在組件自身的props改變，或者mapStateToProps的結(jié)果改變，或者是mapDispatchToProps的結(jié)果改變時shouldComponentUpdate才會返回true，檢查的方式是進(jìn)行shallowEqual的比較。

所以對于某個reducer來說：

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

另外在connect的時候，要謹(jǐn)慎map真正需要的state或者actionCreators到props中，以避免不必要的性能損失。

最后，根據(jù)connect的API我們發(fā)現(xiàn)可以使用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，以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。