react本身是組件化的，它的初衷只是提供一個(gè)UI庫(kù)，但是在ES6以及webpack的大環(huán)境下，react本身已經(jīng)形成了一整套全新的技術(shù)棧:
react: 提供視圖模塊
react-router: 提供視圖路由切換，配合后端路由，可以開(kāi)發(fā)比較強(qiáng)勢(shì)的單頁(yè)應(yīng)用。
redux: 提供程序的數(shù)據(jù)狀態(tài)管理機(jī)制。本身與react并沒(méi)有直接聯(lián)系，但是配合react可以更好地發(fā)揮react的作用。
webpack: 對(duì)react的jsx語(yǔ)法以及es6語(yǔ)法進(jìn)行編譯、對(duì)程序進(jìn)行打包等等。
如果用react + redux開(kāi)發(fā)一個(gè)todo程序，實(shí)現(xiàn)的步驟和難度會(huì)比使用angular要麻煩得多。但是從中可以學(xué)習(xí)到一些新的思想。

redux

redux本身的學(xué)習(xí)，基本只要記住它的三個(gè)東西：action、reducer、dispatch。

action

action描述的是一個(gè)最基本的動(dòng)作。它返回一個(gè)對(duì)象，這個(gè)對(duì)象的屬性里至少包含一個(gè)type屬性，用來(lái)描述動(dòng)作的行為標(biāo)識(shí)，另外的各種屬性則可以作為這個(gè)動(dòng)作所攜帶的數(shù)據(jù)變化。
比如:

    const addItem = (text) => {
          return {
              type: 'ADD_ITEM',
              text
          }  
    }

這個(gè)函數(shù)就是一個(gè)action函數(shù)，它的動(dòng)作類型是ADD_ITEM，動(dòng)作攜帶的數(shù)據(jù)是函數(shù)傳遞進(jìn)來(lái)的參數(shù)text
注意： 這里的action是一個(gè)函數(shù),這是因?yàn)閞edux的dispatch風(fēng)格實(shí)際上是一種函數(shù)式編程風(fēng)格。

reducer

reducer也是一個(gè)函數(shù)，它用來(lái)描述一個(gè)action動(dòng)作，會(huì)給程序的state帶來(lái)怎樣的變化。這個(gè)函數(shù)通常用一些switch語(yǔ)句來(lái)描述不同的action所改變的不同state。
比如:

    const Todo = (state = [], action) => {
            switch (action.type): {
                case: 'ADD_ITEM':
                return [
                  ...state,
                  {action.text}
                ]
                break;
                default:
                return state;
                break;  
            }
    }

注意：
reducer中的state一般會(huì)給一個(gè)默認(rèn)值，然后就是一個(gè)原則：永遠(yuǎn)不要修改state本身的任何值。所以在上面的ADD_ITEM中，采用了ES6的數(shù)組繼承的寫(xiě)法[...state, v]。如果state的表現(xiàn)形式是一個(gè)對(duì)象，那么就應(yīng)該采用Object.assign的寫(xiě)法。
如果有多個(gè)reducer函數(shù)，則可以通過(guò)combineReducers函數(shù)將這一堆reducer給組合起來(lái)。

    const App = combineReducers({Todo})

dispatch

dispatch相當(dāng)于事件觸發(fā)，上面的reducers使用combineReducers組合完畢后，就可以使用redux的store了。

      let store = createStore(App);
      let unsubscribe = store.subscribe(() => {console.log(store.getState())});
      store.dispatch(addItem('hello redux'));
      unsubscribe();

使用createStore創(chuàng)建了程序的狀態(tài)樹(shù)，通過(guò)store的subscribe方法實(shí)現(xiàn)了sub/pub模式，并返回一個(gè)取消訂閱的函數(shù)，這里用unsbuscribe變量接收。使用dispatch函數(shù)來(lái)觸發(fā)action，改變state的當(dāng)前狀態(tài)。調(diào)用store.getState來(lái)獲取程序的當(dāng)前狀態(tài)。直接調(diào)用unsubscribe()來(lái)取消訂閱。
注意：唯一能夠改變state狀態(tài)的方法，就是觸發(fā)action。這樣的設(shè)計(jì)保證了程序狀態(tài)的可控性和可預(yù)測(cè)性。

react-redux

react-redux是一個(gè)配合react使用的redux npm模塊。在redux本身的基礎(chǔ)上，提供了一個(gè)connect中間件，把react的UI與redux的數(shù)據(jù)結(jié)合了起來(lái)。
也就是說(shuō)，react將更加專注地做自己的UI組件部分，redux則專注自己的數(shù)據(jù)部分，然后在傳統(tǒng)的react component組件之外，新增了一個(gè)container組件。
react component只做自己的UI展示與邏輯，并不關(guān)心內(nèi)部的props如何變化，也不知道傳入自己的值是什么(但是可以通過(guò)PropTypes來(lái)規(guī)范傳入值的數(shù)據(jù)類型)。
containers 組件則是先創(chuàng)建兩個(gè)函數(shù)，一個(gè)是mapStateToProps，另一個(gè)是mapDispatchToProps，這兩個(gè)方法會(huì)把redux的state和dispatch函數(shù)轉(zhuǎn)化成react的props，并且一切的數(shù)據(jù)操作都會(huì)由redux內(nèi)部去管理和實(shí)現(xiàn)，然后通過(guò)react-redux的connect方法，把redux的數(shù)據(jù)與react的組件結(jié)合起來(lái)。

    connect(mapStateToProps, mapDispatchToProps)(App);

上述的各種操作都是以函數(shù)為單位的，最為典型的就是connect函數(shù)，它接收兩個(gè)函數(shù)作為參數(shù)，并且返回一個(gè)函數(shù)，這個(gè)返回的函數(shù)又是以函數(shù)作為參數(shù)的。所以這種函數(shù)編程的寫(xiě)法需要理解和習(xí)慣。畢竟JavaScript天生就是適合函數(shù)式編程的。