dva數據流（react）學習

因爲公司用到所以進行了一個簡單的學習，初期接受的時候沒搞清楚本質導致繞了很多的圈子，所以重新整理一下學習思路，方便以後複習！

一、簡單介紹

        dva 首先是一個基於 redux 和 redux-saga 的數據流方案，然後爲了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，所以也可以理解爲一個輕量級的應用框架。

二、重要的模塊(dva 通過 model 的概念把一個領域的模型管理起來，包含同步更新 state 的 reducers，處理異步邏輯的 effects，訂閱數據源的 subscriptions )

1. 定義Model
   
   2.可以進行組件的封裝
   
   3.如何將組件和model層連接起來呢，就是使用connect
   

三、Dva具體的概念

1. 數據流向（數據的改變發生通常是通過用戶交互行爲或者瀏覽器行爲（如路由跳轉等）觸發的，當此類行爲會改變數據的時候可以通過 dispatch 發起一個 action，如果是同步行爲會直接通過 Reducers 改變 State ，如果是異步行爲（副作用）會先觸發 Effects 然後流向 Reducers 最終改變 State）直接看這張見了很多次的圖。
   
2. Models
   (1) State---------------State 表示 Model 的狀態數據，通常表現爲一個 javascript 對象（當然它可以是任何值）；操作的時候每次都要當作不可變數據（immutable data）來對待，保證每次都是全新對象，沒有引用關係，這樣才能保證 State 的獨立性，便於測試和追蹤變化。
   (2)Action---------------Action 是一個普通 javascript 對象，它是改變 State 的唯一途徑。無論是從 UI 事件、網絡回調，還是 WebSocket 等數據源所獲得的數據，最終都會通過 dispatch 函數調用一個 action，從而改變對應的數據。action 必須帶有 type 屬性指明具體的行爲，其它字段可以自定義，如果要發起一個 action 需要使用 dispatch 函數；需要注意的是 dispatch 是在組件 connect Models以後，通過 props 傳入的。
   (3)dispatch 函數------------dispatching function 是一個用於觸發 action 的函數，action 是改變 State 的唯一途徑，但是它只描述了一個行爲，而 dipatch 可以看作是觸發這個行爲的方式，而 Reducer 則是描述如何改變數據的。在 dva 中，connect Model 的組件通過 props 可以訪問到 dispatch，可以調用 Model 中的 Reducer 或者 Effects
   (4)Reducer-------------Reducer（也稱爲 reducing function）函數接受兩個參數：之前已經累積運算的結果和當前要被累積的值，返回的是一個新的累積結果。該函數把一個集合歸併成一個單值,在 dva 中，reducers 聚合積累的結果是當前 model 的 state 對象。通過 actions 中傳入的值，與當前 reducers 中的值進行運算獲得新的值（也就是新的 state）。需要注意的是 Reducer 必須是純函數，所以同樣的輸入必然得到同樣的輸出，它們不應該產生任何副作用。並且，每一次的計算都應該使用immutable data，這種特性簡單理解就是每次操作都是返回一個全新的數據（獨立，純淨），所以熱重載和時間旅行這些功能才能夠使用.
   (5)Effect------------dva 爲了控制副作用的操作，底層引入了redux-sagas做異步流程控制，由於採用了generator的相關概念，所以將異步轉成同步寫法，從而將effects轉爲純函數。
   (6)Subscription

四、具體總結

（1）數據流圖



（2））核心概念

（3）connect方法

（4）dispatch方法

五、dva最簡單的結構

// 創建應用
const app = dva();

// 註冊 Model
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) { return state + 1 },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'add' });
    },
  },
});

// 註冊視圖
app.router(() => <ConnectedApp />);

// 啓動應用
app.start('#root');

六、Model對象相關

（1） Model對象屬性

（2）call put

（3）reducer

（4）Effects