Redux和react-redux的學習總結

寫在最前面：這段時間一直在看前端方面的東西，以前只是瞭解HTML，CSS，JS，jQuery，因爲公司交代了前端的任務，因此後面又看了Bootstrap，React，Redux，react-redux。特別是後面涉及到組件以及組件通訊，讓我有一種想再學習一下Vue的衝動。問渠那得清如許，爲有源頭活水來呀！

 

Bootstrap框架的優點：（封裝CSS，移動設備優先）

1. 移動設備優先、響應式設計：Bootstrap 的響應式 CSS 可以自適應於臺式機、平板電腦和手機；

2. Bootstrap自帶全局CSS設置、可定義基本的 HTML 元素樣式、可擴展的 class；

3. 定義了多種可重用的組件，同時提供了一個帶有網格系統、連接樣式、背景的基本結構；

 

React框架的優點：（減小DOM操做，組件渲染UI）

1. React主要用於構建UI，經過對DOM的模擬，最大限度地減小與DOM的交互；

2. 組件構建，代碼複用

3. 單向的響應數據流，state經過與用戶交互來改變狀態，props是不變的，一般將父組件設置爲state，子組件設置爲props；

4. React 把組件當作是一個狀態機（State Machines）。經過與用戶的交互，實現不一樣狀態，而後渲染 UI，讓用戶界面和數據保持一致。React 裏，只需更新組件的 state，而後根據新的 state 從新渲染用戶界面（不要操做 DOM）。

 

React 只是 DOM 的一個抽象層，並非 Web 應用的完整解決方案。有兩個方面它沒涉及：代碼結構，組件之間的通訊。從而Redux框架來進行優化。　　

Redux框架的優點

大型企業項目中解決組件通訊，優化代碼結構；小項目可不用該框架來優化React。

 

學習Redux以前最好參考Flux框架：

Flux將一個應用分紅四個部分：

View： 視圖層

Action（動做）：視圖層發出的消息（好比mouseClick）

Dispatcher（派發器）：用來接收Actions、執行回調函數

Store（數據層）：用來存放應用的狀態，一旦發生變更，就提醒Views要更新頁面

 

Redux中的基本概念：

1. store：Store 就是保存數據的地方，你能夠把它當作一個容器。整個應用只能有一個 Store；

2. state：Store對象包含全部數據；

3. Action：Action 就是 View 發出的通知，表示 State 應該要發生那種type的變化，同時該通知中能夠攜帶其餘數據；

4. ActionCreator：通用的Action轉換函數；

5. store.dispatch()：store.dispatch()是 View 發出 Action 的惟一方法；

6. Reducer：Reducer接受 Action 和當前 State 做爲參數，返回一個新的 State；

7. 異步操做；

 

React-Redux的概念：

1. connect：用於從 UI 組件生成容器組件，從而將這兩種組件連起來；

2. mapStateToProps：創建一個從（外部的）state對象到（UI 組件的）props對象的映射關係；

3. mapDispatchToProps：創建 UI 組件的參數到store.dispatch方法的映射；

4. Provider：Provider在根組件外面包了一層，這樣App中的全部子組件就默認均可以拿到state；

 

公司要求在頁面上增長一個按鈕來處理相應的工單請求：

1. 初始數據結構：

2. 鏈接UI容器：

3. 添加相應的Modal層，並定義事件函數，同時將父組件的數據傳入子組件：

4. 添加事件處理函數從而控制Modal層的顯示與隱藏：

5. 事件派發mapDispatchToProps定義，其中processRecycleSubmit爲異步處理：

6. Reducer處理Action：

7. 刷新state到子組件的props中：

8. 回收處理函數processRecycleSubmit，構建表單，經過Ajax提交表單：

總結：Dispatch觸發相應的action；action指定將要處理的類型type，但action不操心具體怎麼實現，它只需說明它想處理的類型type，同時提交處理該type的部分數據給reducer；reducer就去具體實現，修改state，而後返回一個全新的state。