dva 基礎

1、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 (例子)

 

2、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）。

參考引伸

• redux docs
• redux docs 中文
• Mostly adequate guide to FP
• JS函數式編程指南
• choo docs
• elm

原文地址：https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md