一、dva 是什么？
dva 是基於現有應用架構 (redux + react-router + redux-saga 等)的一層輕量封裝，沒有引入任何新概念，全部代碼不到 100 行。( Inspired by elm and choo. )
dva 是 framework，不是 library，類似 emberjs，會很明確地告訴你每個部件應該怎么寫，這對於團隊而言，會更可控。另外，除了 react 和 react-dom 是 peerDependencies 以外，dva 封裝了所有其他依賴。
dva 實現上盡量不創建新語法，而是用依賴庫本身的語法，比如 router 的定義還是用 react-router 的 JSX 語法的方式(dynamic config 是性能的考慮層面，之后會支持)。
他最核心的是提供了 app.model 方法，用於把 reducer, initialState, action, saga 封裝到一起，比如：
app.model({ namespace: 'products', state: { list: [], loading: false, }, subscriptions: [ function(dispatch) { dispatch({type: 'products/query'}); }, ], effects: { ['products/query']: function*() { yield call(delay(800)); yield put({ type: 'products/query/success', payload: ['ant-tool', 'roof'], }); }, }, reducers: { ['products/query'](state) { return { ...state, loading: true, }; }, ['products/query/success'](state, { payload }) { return { ...state, loading: false, list: payload }; }, }, });
在有 dva 之前，我們通常會創建 sagas/products.js, reducers/products.js 和 actions/products.js，然后在這些文件之間來回切換。
介紹下這些 model 的 key ：(假設你已經熟悉了 redux, redux-saga 這一套應用架構)
- namespace - 對應 reducer 在 combine 到 rootReducer 時的 key 值
- state - 對應 reducer 的 initialState
- subscription - elm@0.17 的新概念，在 dom ready 后執行，這里不展開解釋，詳見：A Farewell to FRP
- effects - 對應 saga，並簡化了使用
- reducers
特性：
- 易學易用：僅有 6 個 api，對 redux 用戶尤其友好
- elm 概念：通過
reducers,effects和subscriptions組織 model - 支持 mobile 和 react-native：跨平台 (react-native 例子)
- 支持 HMR：目前基於 babel-plugin-dva-hmr 支持 components、routes 和 models 的 HMR
- 動態加載 Model 和路由：按需加載加快訪問速度 (例子)
- 插件機制：比如 dva-loading 可以自動處理 loading 狀態，不用一遍遍地寫 showLoading 和 hideLoading
- 完善的語法分析庫 dva-ast：dva-cli 基於此實現了智能創建 model, router 等
- 支持 TypeScript：通過 d.ts (例子)
二、dva 的8個概念
數據流向
數據的改變發生通常是通過用戶交互行為或者瀏覽器行為（如路由跳轉等）觸發的，當此類行為會改變數據的時候可以通過 dispatch 發起一個 action，如果是同步行為會直接通過 Reducers 改變 State ，如果是異步行為（副作用）會先觸發 Effects 然后流向 Reducers 最終改變 State，所以在 dva 中，數據流向非常清晰簡明，並且思路基本跟開源社區保持一致（也是來自於開源社區）。
Models
State
type State = any
State 表示 Model 的狀態數據，通常表現為一個 javascript 對象（當然它可以是任何值）；操作的時候每次都要當作不可變數據（immutable data）來對待，保證每次都是全新對象，沒有引用關系，這樣才能保證 State 的獨立性，便於測試和追蹤變化。
在 dva 中你可以通過 dva 的實例屬性 _store 看到頂部的 state 數據，但是通常你很少會用到:
const app = dva(); console.log(app._store); // 頂部的 state 數據
Action
type AsyncAction = any
Action 是一個普通 javascript 對象，它是改變 State 的唯一途徑。無論是從 UI 事件、網絡回調，還是 WebSocket 等數據源所獲得的數據，最終都會通過 dispatch 函數調用一個 action，從而改變對應的數據。action 必須帶有 type 屬性指明具體的行為，其它字段可以自定義，如果要發起一個 action 需要使用 dispatch 函數；需要注意的是 dispatch 是在組件 connect Models以后，通過 props 傳入的。
dispatch({
type: 'add',
});
dispatch 函數
type dispatch = (a: Action) => Action
dispatching function 是一個用於觸發 action 的函數，action 是改變 State 的唯一途徑，但是它只描述了一個行為，而 dipatch 可以看作是觸發這個行為的方式，而 Reducer 則是描述如何改變數據的。
在 dva 中，connect Model 的組件通過 props 可以訪問到 dispatch，可以調用 Model 中的 Reducer 或者 Effects，常見的形式如：
dispatch({
type: 'user/add', // 如果在 model 外調用，需要添加 namespace payload: {}, // 需要傳遞的信息 });
Reducer
type Reducer<S, A> = (state: S, action: A) => S
Reducer（也稱為 reducing function）函數接受兩個參數：之前已經累積運算的結果和當前要被累積的值，返回的是一個新的累積結果。該函數把一個集合歸並成一個單值。
Reducer 的概念來自於是函數式編程，很多語言中都有 reduce API。如在 javascript 中：
[{x:1},{y:2},{z:3}].reduce(function(prev, next){ return Object.assign(prev, next); }) //return {x:1, y:2, z:3}
在 dva 中，reducers 聚合積累的結果是當前 model 的 state 對象。通過 actions 中傳入的值，與當前 reducers 中的值進行運算獲得新的值（也就是新的 state）。需要注意的是 Reducer 必須是純函數，所以同樣的輸入必然得到同樣的輸出，它們不應該產生任何副作用。並且，每一次的計算都應該使用immutable data，這種特性簡單理解就是每次操作都是返回一個全新的數據（獨立，純凈），所以熱重載和時間旅行這些功能才能夠使用。
Effect
Effect 被稱為副作用，在我們的應用中，最常見的就是異步操作。它來自於函數編程的概念，之所以叫副作用是因為它使得我們的函數變得不純，同樣的輸入不一定獲得同樣的輸出。
dva 為了控制副作用的操作，底層引入了redux-sagas做異步流程控制，由於采用了generator的相關概念，所以將異步轉成同步寫法，從而將effects轉為純函數。至於為什么我們這么糾結於 純函數，如果你想了解更多可以閱讀Mostly adequate guide to FP，或者它的中文譯本JS函數式編程指南。
Subscription
Subscriptions 是一種從 源 獲取數據的方法，它來自於 elm。
Subscription 語義是訂閱，用於訂閱一個數據源，然后根據條件 dispatch 需要的 action。數據源可以是當前的時間、服務器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。
import key from 'keymaster'; ... app.model({ namespace: 'count', subscriptions: { keyEvent(dispatch) { key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) }); }, } });
Router
這里的路由通常指的是前端路由，由於我們的應用現在通常是單頁應用，所以需要前端代碼來控制路由邏輯，通過瀏覽器提供的 History API 可以監聽瀏覽器url的變化，從而控制路由相關操作。
dva 實例提供了 router 方法來控制路由，使用的是react-router。
import { Router, Route } from 'dva/router'; app.router(({history}) => <Router history={history}> <Route path="/" component={HomePage} /> </Router> );
Route Components
在組件設計方法中，我們提到過 Container Components，在 dva 中我們通常將其約束為 Route Components，因為在 dva 中我們通常以頁面維度來設計 Container Components。
所以在 dva 中，通常需要 connect Model的組件都是 Route Components，組織在/routes/目錄下，而/components/目錄下則是純組件（Presentational Components）。
參考引申
原文地址：https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md