簡述react、redux、react-redux、redux-saga、dva之間的關係

【react】

1. 定位：React 是一個用於構建用戶界面的JavaScript庫。

2. 特色：它採用聲明範式來描述應用，創建虛擬dom，支持JSX語法，經過react構建組件，可以很好的去複用代碼；

3. 缺點：react抽離了dom，使咱們構建頁面變得簡單，可是對於一個大型複雜應用來講，只有dom層的便捷是不夠的，如何組織、管理應用的代碼，如何在組件件進行有效通訊，這些它都沒有解決；所以，它還須要一個前端架構才能應對大型應用；

【redux】

1. 定位：它是將flux和函數式編程思想結合在一塊兒造成的架構；

2. 思想：視圖與狀態是一一對應的；全部的狀態，都保存在一個對象裏面；

3. API：

   1. store：就是一個數據池，一個應用只有一個；　　
   2. state：一個 State 對應一個 View。只要 State 相同，View 就相同。
   3. action：State 的變化，會致使 View 的變化。可是，用戶接觸不到 State，只能接觸到 View。因此，State 的變化必須是 View 致使的。Action 就是 View 發出的通知，表示 State 應該要發生變化了。Action 是一個對象。其中的type屬性是必須的，表示 Action 的名稱。其餘屬性能夠自由設置。
   4. dispatch：它是view發出action的惟一方法；
   5. reducer：view發出action後，state要發生變化，reducer就是改變state的處理層，它接收action和state，經過處理action來返回新的state；
   6. subscribe：監聽。監聽state，state變化view隨之改變；

【react-redux】

1. 定位：react-redux是爲了讓redux更好的適用於react而生的一個庫，使用這個庫，要遵循一些規範；

2. 主要內容

   1. UI組件：就像一個純函數，沒有state，不作數據處理，只關注view，長什麼樣子徹底取決於接收了什麼參數（props）
   2. 容器組件：關注行爲派發和數據梳理，把處理好的數據交給UI組件呈現；React-Redux規定，全部的UI組件都由用戶提供，容器組件則是由React-Redux自動生成。也就是說，用戶負責視覺層，狀態管理則是所有交給它。
   3. connect：這個方法能夠從UI組件生成容器組件；但容器組件的定位是處理數據、響應行爲，所以，須要對UI組件添加額外的東西，即mapStateToProps和mapDispatchToProps，也就是在組件外加了一層state；
   4. mapStateToProps：一個函數， 創建一個從（外部的）state對象到（UI組件的）props對象的映射關係。 它返回了一個擁有鍵值對的對象；
   5. mapDispatchToProps：用來創建UI組件的參數到store.dispatch方法的映射。 它定義了哪些用戶的操做應該看成動做，它能夠是一個函數，也能夠是一個對象。

       以上，redux的出現已經可使react創建起一個大型應用，並且可以很好的管理狀態、組織代碼，可是有個棘手的問題沒有很好地解決，那就是異步；    

【redux-saga】：

1. 定位：react中間件；旨在於更好、更易地解決異步操做（action）；redux-saga至關於在Redux原有數據流中多了一層，對Action進行監聽，捕獲到監聽的Action後能夠派生一個新的任務對state進行維護；

2. 特色：經過 Generator 函數來建立，能夠用同步的方式寫異步的代碼；

3. API：

   1. Effect： 一個簡單的對象，這個對象包含了一些給 middleware 解釋執行的信息。全部的Effect 都必須被 yield 纔會執行。
   2. put：觸發某個action，做用和dispatch相同；

【dva】

1. 定位：dva 首先是一個基於 redux 和 redux-saga 的數據流方案，而後爲了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，因此也能夠理解爲一個輕量級的應用框架。dva = React-Router + Redux + Redux-saga；

2. 核心：

   1. State：一個對象，保存整個應用狀態；
   2. View：React 組件構成的視圖層；
   3. Action：一個對象，描述事件
   4. connect 方法：一個函數，綁定 State 到 View
   5. dispatch 方法：一個函數，發送 Action 到 State

3. model：dva 提供 app.model 這個對象，全部的應用邏輯都定義在它上面。

4. model內容：

   1. namespace：model的命名空間；整個應用的 State，由多個小的 Model 的 State 以 namespace 爲 key 合成；
   2. state：該命名空間下的數據池；
   3. effects：反作用處理函數；
   4. reducers：等同於 redux 裏的 reducer，接收 action，同步更新 state；
   5. subscriptions：訂閱信息；