上文我們已經(jīng)用自己的 eventHub 來完成了任意組件之間的通訊，接下來我們使用 redux 來達到相同的功能。

直接看官網(wǎng)的例子，我們直接開始改寫這樣

image.png

可以看到思路和我們的 eventHub 差不多，只不過 redux 使用了更多新名詞（吐槽...）訂閱事件用 subscribe ， 觸發(fā)事件用 dispatch，觸發(fā)事件的名字用 type ，傳遞的參數(shù)為 payload。

雖然我們現(xiàn)在已經(jīng)用 redux 來改寫了這個例子，但是這個方法還是不夠優(yōu)雅，

我們在改變數(shù)據(jù)的時候，還是需要數(shù)據(jù)一層一層的往下傳，對比于最早的 props 只是少了一層一層往上傳而已，但是這始終還是沒有解決問題。

所以為了解決這個問題，于是我們現(xiàn)在要使用 react-redux 再來改造這個例子

整體依舊不變，我們只是為了解決一層一層往下傳遞的問題，所以我們只需要用 Provider 把 App 包起來，在用 connect 連接子組件即可。

完整結果看這里

對比用 redux ，react-redux 不需要在額外去訂閱 render 函數(shù)，不需要再通過 props 一層一層的去傳遞數(shù)據(jù)，只需要用 Provider 將 App 組件包裝，再用 connect 將子組件包裝即可使用。

在這個栗子中我們得以看出：

我們通過 <ReactRedux.Provider store={store}><App /></ReactRedux.Provider> 把 App 包起來之后，我們只需再在組件內使用 ReactRedux.connect 這個 API，然后在第一個括號里，傳入 mapStateToProps 和 mapDispatchToProps 這兩個變量以后，我們就能直接在組建內使用 props.數(shù)據(jù) 使用，這樣就避免了最初通過 props 一層一層的傳遞數(shù)據(jù)。

ps：又多學了兩個 API ：）（手動狗頭）