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

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

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

Provider

Provider這個(gè)模塊是作為整個(gè)App的容器，在你原有的App Container的基礎(chǔ)上再包上一層，它的工作很簡單，就是接受Redux的store作為props，并將其聲明為context的屬性之一，子組件可以在聲明了contextTypes之后可以方便的通過this.context.store訪問到store。不過我們的組件通常不需要這么做，將store放在context里，是為了給下面的connect用的。

這個(gè)是Provider的使用示例：

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

connect

這個(gè)模塊是算是真正意義上連接了Redux和React，正好它的名字也叫connect。

先考慮Redux是怎么運(yùn)作的：首先store中維護(hù)了一個(gè)state，我們dispatch一個(gè)action，接下來reducer根據(jù)這個(gè)action更新state。

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

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

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

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

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

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

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

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