dva入門講解

dva是什麼？

DVA 是基於 redux、redux-saga 和 react-router 的輕量級前端框架及最佳實踐沉澱。

理解dva跟其餘技術實現的對應關係，有利於深刻理解dva。

爲何要用dva？

平常react開發過程當中，咱們常常會遇到如下場景：

• 咱們但願有安全的數據共享機制
• 咱們但願數據邏輯跟視圖邏輯分離，既有利於提升代碼健壯性，也易於調試。
• 咱們但願異步請求數據，並改變視圖。

這些需求，dva都知足了：

• 經過把狀態上提到 dva model 中，咱們把數據邏輯從頁面中抽離出來。
• 經過 effect 優雅地處理數據生成過程當中的反作用，反作用中最多見的就是異步邏輯。
• dva model 中的數據能夠注入給任意組件。

如何使用dva？

爲何使用dva，而不選擇redux，最重要的緣由是dva用法簡單，能夠下降團隊成員的學習成本。

相比redux，dva真的能夠算很是簡單，咱們來看看基本概念。

model

其中，model 是 DVA 中最重要的概念，基本的屬性以下：

• namespace：model 的命名空間，只能用字符串。一個大型應用可能包含多個 model，經過namespace區分。
• state：當前 model 狀態的初始值，表示當前狀態。
• reducers：用於處理同步操做，能夠修改 state，由 action 觸發。
• effects：用於處理異步操做（例如：與服務端交互）和業務邏輯，也是由 action 觸發。可是，它不能夠修改 state，要經過觸發 action 調用 reducer 實現對 state 的間接操做。
• action：是 reducers 及 effects 的觸發器

connect

熟悉react開發的你，應該知道狀態控制一直是react的一個難點。

咱們能夠把子組件的 state 能夠上提，由父組件來管理：

• 子組件間接回調到父組件的 setState 的方法來改變父組件的 state；
• 新的 state 經過 props 的形式把再次被子組件獲悉。

固然，dva給了咱們另外一種可能，就是把state上提到全部React子組件之上，過程相似：

• 頁面經過調用 dispatch 函數來驅動 dva model state 的改變；
• 改變後的 dva model state經過 connect 方法注入頁面。

要達到上述效果，咱們就必須想辦法將React跟dva這兩個平行世界關聯起來，connect 粉墨登場。connect是鏈接dva跟React的關鍵，必定要重點理解。

dva中的connect ，採用的是裝飾器的寫法，所謂裝飾器，就是給裝飾對象賦予它原本不具有的能力。connect的存在，就是爲了讓組件獲取兩樣東西：model中的數據，驅動model改變的方法。

connect 接收兩個參數，作的就是這兩件事：

• mapStateToProps：獲取model中的數據
• mapDispatchToProps：驅動model改變的方法

其中，mapStateToProps 字面含義就是把dva model中的state經過組件的props注入給組件。

而mapDispatchToProps 字面含義就是將dispatch方法經過組件的props注入給組件。使用mapDispatchToProps跟dispatch向組件注入方法，組件使用這些方法能給dva model發送消息。

dispatch

這裏就不得不提下dispatch，dispatch 函數就是和 dva model 打交道的惟一途徑。 dispatch 函數接受一個 對象 做爲入參，在概念上咱們稱它爲 action，惟一強制要包含的是 type 字段，string 類型，用來告訴 dva 咱們想要幹什麼。

action

終於輪到action上臺了。咱們把想作的事情經過 action 描述出來，並經過 dispatch 告訴 dva model，而對這個消息的處理就是 dva 的事情了。

reducer

咱們經過dispatch派發了action，如今問題來了，dva如何識別並執行action呢？

這就是reducer要作的事情。

dva model 中能夠定義一個叫作 reducers 的成員用來響應 action 並修改 state。每個 reducer 都是一個 function，action 派發後，經過 action.type 被惟一地匹配到，隨後執行函數體邏輯，返回值被 dva 使用做爲新的 state。state 的改變隨後會被 connect 注入到組件中，觸發視圖改變。

咱們再回過頭來看上文提到的model基本屬性：

• namespace：model 的命名空間，只能用字符串。一個大型應用可能包含多個 model，經過namespace區分。
• state：當前 model 狀態的初始值，表示當前狀態。
• reducers：用於處理同步操做，能夠修改 state，由 action 觸發。
• effects：用於處理異步操做（例如：與服務端交互）和業務邏輯，也是由 action 觸發。可是，它不能夠修改 state，要經過觸發 action 調用 reducer 實現對 state 的間接操做。
• action：是 reducers 及 effects 的觸發器

dva的用法，其實都是圍繞着這些基本屬性展開，本人但願讀者能夠加深對這些屬性的理解。

最後，上一張dva官方的代碼示例圖吧：