簡述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：訂閱信息；