最近幾天學習React + Redux，還有Redux異步。
React比較簡單，它只是負責界面渲染而已，就如同Vue或者Angular一樣。官網有初始項目工具：create-react-app 。直接按照ReadMe就可以建立空項目進行React練習。
React是單向數據流，從父組件傳遞到子組件，一般用props傳遞。每個組件的props不能更改，只能由父組件進行傳值更改，所以稱爲單向數據流。每個組件有自己內部狀態，使用state屬性進行存儲，組件可以自己維護更改state的屬性狀態值。
如此，產生一個問題，很多情況下，子組件可能有鼠標或者鍵盤操作需要觸發事件更改父組件的關聯展示，或者觸發兄弟組件的關聯展示。這樣就比較麻煩。解決方案就是父組件傳遞子組件的props中寫回調函數，而回調函數的實現是在父組件中，所以回調函數可以更改父組件的state數據，並更改傳遞給子組件的props展示計算數據。從而實現子組件更改父組件。
如果只有一個子組件和父組件，比較容易解決。而如果中間隔了好幾個組件，不是父子關係的組件，就要回調一層套一層。再比如兄弟組件中間相互關聯影響，就要以共同的頂級的父節點進行傳輸數據中介。十分麻煩。原理猶如DOM中的點擊事件的冒泡和捕獲一樣，從下往上，再從上往下。
自己可以寫一個共享全局對象，然後每個組件的數據state都是來取自它。但是需要自己維護整個全局對象，而且還需要監聽數據變化來及時渲染，非常有挑戰。
由此需要引入Redux，它實現了一個數據大對象，供所有網站使用。
Redux由三個部分組成：Action，Reducer，Store。 Store存儲所有數據。Reducer專門直接處理Store數據並更新它。Action則是供網站組件調用通知指定的reducer執行，而不直接操作Store數據。因此Action一般和Reducer一一對應，採用相同標識type進行尋找，Action中順便帶過去計算變量數據給reducer進行處理。
Redux中的Reducer比較難於理解，創建Store時，Reducer傳遞的是函數給Store，比較容易造成誤解，其實函數名就是Store裏面你指定的數據標識，比如 Store 中 的一個數據對象叫 items 用來存儲所有訂單數據條數，而要處理items的變化，Reducer的暴露的函數名就叫做items了，裏面包含所有要處理items的Action的種類，所以一般是switch來判斷。
Redux學完後，如何與React一起應用是個問題，Redux其實只是負責數據處理，不侷限於應用到React，也可以應用到其它的渲染框架。
引入react-redux中間件幫助解決問題。它的一個頻繁使用函數是connect，函數是兩個可選參數，結果返回一個函數，需要調用並傳入React組件。比如React組件A，原本是export default A。就改成 export default connect(param1,param2)(A)。參數param1是一個函數，connect會傳遞整個Store數據作爲param1函數的參數，在函數param1中進行Store數據的獲取，並在結束時返回數據對象，connect自動把返回的對象的數據賦值到組件A的props，A組件就可以使用Store返回的數據了，而且Store每次更改數據，param1函數就會執行一下。參數param2是個對象，或者傳入函數返回對象，對象中的數據是Redux中定義的Action，connect會將對象中的Action賦值到A的props中，供A直接調用，從而Reducer可以接收Action並處理更新數據。
至此將近尾聲，還留下Redux中Reducer處理數據時，如果需要ajax請求或者異步需要解決一下。因爲Reducer數據處理只有同步。所以引入redux-thunk中間件，在Reducer處理異步數據時，多一層高階函數回調一下就可以了。
學完這些，該去寫寫組件庫，看看各類例子項目熟悉。因爲React是純函數式編程，寫法因人而異，es語法太飄逸。
歡迎關注公衆號，獲取更多資料。
