通過前面的教程，我們有了簡單的環境，并且可以運作 <code>redux</code> 的程式，也對 如何編寫redux示例 有了初步的印象；
掌握了 使用redux控制狀态轉移，繼而驅動 react 元件發生改變，這才是學習redux的初衷。
本篇我們将 redux 和 react 聯合起來，着重講解 <code>redux-react</code> 子產品的使用；
在原有的基礎上，我們編寫紅綠燈元件：
在 components/light/index.js 中寫react代碼，其結構非常簡單：
根據更改樣式類名（'red'、'green'、'yellow'），進而移動 sprite圖 産生燈變換的效果：
修改 components/light/demo.js 檔案代碼為：
這樣就能通過 http://localhost:3000/light/demo 預覽這個元件了；
有了react和之前的redux，現在就要将兩者連結起來了。我們的目标是讓紅綠燈運作起來，就好比平時在十字路口看到的那樣；
再建立一個示例檔案，就不叫demo了，叫做<code>redux</code>好了：
之是以示例檔案名稱為 <code>demo.js</code> 或 <code>redux.js</code> ，是因為我在 webpack.config.js 中配置了，如果想用其他的檔案名，隻要依樣畫葫蘆就可以；
首先在 components/light/redux.js 中輸入最基本的腳手架代碼，引入所需要的元件或子產品：
繼而建立一個 app react類 ，作為總的容器，将上述的 light 元件放入其中：
上面的代碼還是個半成品，看不到效果；簡單描述一下上面的代碼做了什麼：
定義 <code>app</code> 容器，将 light 元件放在其 <code>render</code> 方法中
constructor 方法引用了 _bind方法，友善一次性綁定 <code>this</code> 上下文，該方法來自文章 refactoring react components to es6 classes
handleclick 方法是純粹是為了示範，當使用者點選紅綠燈的時候，紅綠燈調用 autochange方法 開始自動變換，使用者再次點選的時候就停止變換；
autochange 方法用于紅綠燈狀态自動轉換的，這裡占位；本質是使用 <code>settimeout</code> 代替 <code>setinterval</code> 實作；
這是最為關鍵的一個步驟，
這裡使用 react-redux 提供 <code>connect</code> 的方法 連結react元件和redux類：
connect 方法不會改變原來的元件類，反而傳回一個新的 已與 redux store 連接配接的 元件類。注意這裡并沒有注入<code>store</code> 對象，真正 <code>store</code> 對象的注入靠最後的 <code><provider store></code>元件；（更多說明請參考 [react-redux 的 api][1]）
傳入 connect 的 mapstatetoprops方法 ，正如其名，是将 redux 的狀态 映射到 react元件的props屬性。任何時候，**隻要 redux store 發生改變，mapstatetoprops 函數就會被調用**。這裡傳回對象是 <code>{light:state}</code>，這樣確定 redux 中的 state 發生改變時，元件的 props.light 都是最新的 redux state。
mapdispatchtoprops方法 則是将 store 中的 dispatch方法 直接封裝成對象的一個屬性，一般會用到 redux 的輔助函數 bindactioncreators()；這裡将 <code>dispatch</code> 綁定到 <code>action</code>屬性，這樣在紅綠燈元件内讓其變成紅燈的時候，不需要 <code>dispatch(changered())</code> 這麼調用，直接使用 <code>actions.changered()</code>，語義化更好；（更多說明請參考 [react-redux 的 api][1]）
最後的 <code><provider store></code> 使元件層級中的 connect() 方法都能夠獲得 redux store，這裡才真正注入<code>store</code>變量，之前的隻是聲明而已（之前的好比store是個形參，到了這一步store就是實參了）。（更多說明請參考 [react-redux 的 api][1]）
經過上面的語句，redux就将 state屬性 、 （**store** 的） <code>dispatch方法</code> 與 r
eact 元件的 props 綁定在一起，凡是更改 redux 的 states，就會更新所連接配接元件的 <code>props</code> 屬性。
react-redux 中的 connect 方法就算是hoc（high order component，高階元件）了，具體原理可參考文章 初識react中的high order component，這是因為如果使用es6 寫react元件的話，mixin是不支援的 ，是以使用high order component代替；
了解了最為困難的部分，之後的事情就水到渠成了；
現在，隻要記住 在app中可以直接使用redux中的一切了 就行了
我們回過頭來，完善 <code>app</code> 元件的代碼，完善 autochange方法：
至此已經完成本節示例，通過 <code>npm start</code> 開啟服務， 在 http://localhost:3000/light/redux 中檢視。
在這個示例裡，通過點選紅綠燈，每隔若幹秒紅綠燈就會變換顔色，這說明兩者已經連結起來；
（這個是gif圖，如果沒動畫請點選在新視窗打開）
在後一篇文章，将示例如何處理多個redux、react的情形；
[1] http://camsong.github.io/redux-in-chinese/docs/react-redux/api.html