node, npm, react, redux, es6, webpack
1.可以npm init, 建立一個新的工程。建立package.json檔案，定義需要的dependency，scripts，version等等。
2.新增webpack.config.json檔案，定義插件項配置，頁面入口檔案，檔案輸出，加載器的配置，其他解決方案配置等。下面提供了簡單配置的demo，更詳細的講解，請參考 webpack 入門指南: w2bc.com/Article/50764。
View Code
4.建立工程的各個子產品
(1).在modules檔案夾建立Home.js, 使用antd 的Menu元件, 展示我們要示範的功能。
(2).注冊Home頁面的路由，對應routes/index.js加入如下代碼。
(3).啟動工程， npm run dev, 浏覽器中輸入 http://localhost:8000/demo1，即可預覽我們的Home頁面。
(1).在component目錄下建立ShowSelfMsg.js, 通過改變state狀态，重新渲染頁面.
(2).注冊路由，在routes/index.js中加入如下代碼。
(3).在Home頁面中點選 ‘頁面渲染展示資訊’，即可進入這個頁面。
(1).代碼編寫如下。
(I).在constants建立ActoinTypesjs，定動作類型；
(II).在actions目錄中建立simulationRquest.js, 定義要分發的動作；
(III)在reducers目錄建立simulationRquest.js，存放reducer函數，用來修改store狀态，然後将該函數放入到reducers/index.js中的combineReducers函數中,最終會合并成一個新的reducer；
(IV)components目錄中建立FrontAndRearInteractive.js, dispatch 自定義的動作，實作模拟前背景互動功能。
ActionType.js
FrontAndRearInteractive.js
actions/simulationRquest.js
reducers/simulationRquest.js
(2).路由注冊，在routes/index.js增加如下代碼。
(3).在Home頁面中點選 ‘模拟前背景互動’，即可進入頁面。
(1).在components目錄建立PageExchange.js 和 Childpage.js，分别為父頁面和子頁面。注意，這裡父頁面的變量資訊 是通過路由的方式傳遞過去的，當然也可以通過state方式傳遞過去。
PageExchange.js
Childpage.js
(3).在Home頁面中點選‘頁面切換’，即可進入頁面。
(1).先說一下應用場景：多個頁面可能需要類似的擴充功能，通過自定義擴充元件，完成對資訊的加載。首頁面資訊儲存時，通知擴充元件要儲存資訊了，擴充元件将最新修改的資訊告知首頁面，首頁面擷取到全部資訊後，一起将資料傳給背景，完成首頁面資訊和擴充資訊的儲存。
(2).在components目錄下建立Page.js和ExtendPage.js，分别為首頁面和自定義擴充元件。
Page.js
ExtendPage.js
(3).說一下元件的擴充機制
(I).擴充元件自身會維護更新自己state狀态，在觸發擴充元件儲存時，擴充元件将自身資料通過dispatch進行分發，最後通過對應的reducer(這個reducer會通過combineReducers函數合并成一個新的reducer)進行處理，根據邏輯生成新的state。
>>定義動作類型
>>分發動作
>>reducer處理動作，傳回新的state
>>自定義的reducer函數通過combineReducers函數進行合并
(II).父級元件如何擷取擴充元件的狀态？
也就是store中的狀态樹變化的時候，元件可以通過 mapStateToProps 函數從狀态樹中擷取最新的state。
(III).父級元件如何通知擴充元件 準備儲存資料了？
>>擴充元件接收父級元件兩個參數：childState, 通知擴充元件狀态發生變化; callBack, 修改childState狀态，擴張元件通知父級元件更新完成。
>>父級元件儲存資料時，首先擷取到自己的資料，然後通過setState()方法改變childState的值，通知擴充元件。最後通過setState方法傳入的回調函數（該函數在元件更新完成之後調用）擷取到擴充元件的最新state。
>>擴充元件接收到父級元件的通知，重新整理store中的state。這樣父級元件和擴充元件自身都可以通過mapStateToProps方法擷取到最新的state。
(4).注冊路由，在routes/index.js中加入如下代碼。
(5).在Home頁面中點選‘頁面切換’，即可進入頁面。
4.出現如下錯誤：Cannot sync router: route state does not exist. Did you install the routing reducer，參考：
5.module.exprots, export, export default差別：
參考：
驗證一下 redux store.dispatch 和 react元件 props中的dispath，的确是一樣的。