dva@2.4.1
以下內容將結合官方提供的例子：user-dashboard進行講解，請先行下載執行~
餐廳點餐的比喻
這裡引用之前一位同學的比喻，如果把 dva 比喻成一個餐館，事情就比較好理解。
假設 dva 是一個餐館，State 是餐館裡面的一道道佳餚，那麼會發生下圖的故事：
客戶到餐館，先看一下餐牌，選好菜之後，就讓服務員給到菜廚房做菜，廚房做好菜之後，就髮菜送到客戶桌上。
結合兩張圖來看看（第二張是官網給出的資料流向的解釋圖）
圖二幾個概念的類比如下：
- State —— 佳餚
- Route Component —— 客戶
- Model —— 廚房 & 餐牌
- Action —— 點菜
- connect —— 這個就是做好菜後，服務員知道這道菜要送給哪個客戶的關鍵
這裡 Model 有點特別，既是廚房又是餐牌，程式是自己寫的，要想知道有什麼“菜”，可以檢視每個 model 中定義了什麼，當然如果有文件的話就更佳。
dva 的資料流向非常清晰簡單，剛開始用可能會覺得有點繞，但慢慢上手之後就會發現這樣的分類在編碼時很方便。
拿 ant-design-pro，核心的三個資料夾是 models、pages、services
models，承當定義各個模組的資料、處理各個模組的資料、請求非同步資料的作用。在我們上面的比喻中就是餐廳的餐牌本以及餐廳。 pages，各個頁面、各個功能模組，使用資料的主要地方。 services，只是用於定義介面，沒其他作用。
過程中很多步驟都被 dva 封裝起來了，我們程式設計師只需要在 models 中定義，在 pages 中使用即可。
Action 和 connect
Model就不詳細講，詳細內容請見：假期充電 Day 4 —— Dva 入門課之Model閒聊
Action 跟 Redux 中的概念是一樣的（Dva 可以理解成 Redux 的一個高度好用封裝版），State 不能直接修改，只能通過觸發 Action 來修改（在下的理解是為了保持資料流的單一性），Action通常由 dispatch 函式觸發，所以在使用 dva 中會經常看到如下程式碼：
dispatch({
type: 'user/add', // user 是名稱空間，add是該名稱空間下的函式（可能是Reducer也能是Effect）
payload: {}, // 需要傳遞的資訊
});
複製程式碼以上程式碼意思就是觸發 user 名稱空間下的 add 方法來達到修改特定 State 的目的。
而 connect 是一個高階函式，高階函式的解釋詳細見 【第1448期】深入理解 React 高階元件
connect的主要作用是將 Model 中定義的 State 關聯到頁面中，實際上是以高階函式的形式注入到該頁面的 props 中。
需要注意的是，有些地方用 ES5 的寫法，有些地方用 ES7的寫法，本質上是一樣的，只是寫法不同。
Effect
最後講一下 Effect 吧
我們結合文章開頭提到的例子來談談，點開這個連結，你會看到 *remove({ payload: id }, { call, put })，
effects物件中定的函式都用Generator函式，的寫法。每個函式都有兩個引數 *remove({ payload: id }, { call, put })，注意，這裡用了函式引數的解構賦值的寫法
第一個引數，實際上就是 dispatch 的引數，即：
dispatch({
type: 'users/remove',
payload: id,
});
複製程式碼中的這個物件：
{
type: 'users/remove',
payload: id,
}
複製程式碼而第二個引數結構出來的 call, put 是兩個函式
call 的作用是非同步呼叫一個後臺介面，請求後臺資料並返回（ps，這裡是以同步的寫法寫非同步函式，下面的程式碼會等這個非同步操作結束後再執行）
put 的作用是觸發本 model 內的 effects 函式或者 reducers 函式
好了，今天的內容就到這裡，歡迎吐槽和交流~
作者簡介：吳勤發，蘆葦科技web前端開發工程師。擅長網站建設、公眾號開發、微信小程式開發、小遊戲、公眾號開發，專注於前端框架、服務端渲染、SEO技術、互動設計、影象繪製、資料分析等研究，有興趣的小夥伴來撩撩我們~ web@talkmoney.cn
訪問 www.talkmoney.cn 瞭解更多