使用dva框架的總結

最近的專案是react+dva+atd+webpack的乙個後台專案，剛接觸dva就感覺很喜歡，很簡潔用著很爽。

關於使用redux中的一些問題

1、檔案切換問題、

redux的專案通常喲啊分為reducer、action、saga、component等等，我們需要在檔案之間來回切換，並且檔案通常是分目錄存放：

+src

+sagas

-user.js

+reducers

-user.js

+actions

- user.js

所以我們要在幾個user.js中來回切換。

2、saga建立麻煩

在saga裡面監聽乙個action通常這樣寫

function *usercreate()  catch
(e) {}
}function *usercreatewatcher() 
function *rootsaga()

對於redux-saga，這樣設計可以讓實現更加靈活，但實際專案中，大部分場景只需要用到takeevery和takelatest就足夠了，每個action的監聽都需要這麼寫就顯得有些冗餘。

3、enrty建立麻煩

除了redux store的建立，中介軟體的配置，路由的初始化。provider的store的繫結，saga的初始化，還要處理reducer、component、saga的hmr，看起來比較複雜

dva就是基於redux、redux-saga和react-router的輕量級前端框架

看下dva是如何來使用的

一、首先是定義路由，組成應用的不同頁面

定義路由元件，新增路由資訊到路由表，編輯router.js

二、編寫ui元件

三、定義model，處理資料和邏輯

通過model的概念吧乙個領域的模型管理起來，包含同步更新state的reducers，處理非同步邏輯的effects，訂閱資料來源的subscriptions

四、connect起來

單獨完成了model和component，使用dva提供的connect方法，其實這個connect就是react-redux的connect

最好的學習方式就是自己先實現乙個demo，有興趣在antd的文件裡有，可以動手敲一下

看一下幾個api來感受下dva的框架思想

資料流向

資料的改變發生通常是通過使用者互動行為或者瀏覽器的行為（如路由跳轉等）觸發，可以通過dispatch發起乙個action，如果是同步行為會直接通過reducer改變state，如果非同步行為（***）會先觸發effects，然後通過reducer最終改變state，所以在dva中，資料流向非常清晰簡明

state表示model的狀態資料，通常表現為乙個js物件

action是乙個普通的js物件，他是改變state的唯一途徑。無論是ui事件，網路**，還是websocket等資料來源所獲取的資料，最終都會通過dispatch函式呼叫乙個action，從而改變對應資料。action必須帶有type屬性指明具體的行為，其他字段可以自定義，如果發起乙個action需要使用dispatch函式，dispatch是在元件connect model以後，通過props傳入的

dispatch函式，action是改變state的唯一途徑，但是他只是描述了乙個行為，dispatch可以看做是觸發這個行為的方式，而reducer則是描述如何改變資料的

在dva中，connect model的元件通過props可以訪問到dispatch，可以呼叫model中的reducer或者effects，常見的形式

dispatch(, //
需要傳遞的資訊
});

reducer：接受兩個引數，之前累積運算的結果和當前想要被累積的值，返回的是累積的結果，reducer來自於函式式程式設計，reducer是純函式，不應該產生任何***，每次運算都是返回乙個全新的資料

effect：被稱為***，在應用中，最常見的就是非同步操作。來自於函式程式設計的概念

subscription：

是一種從源獲取資料的方法，來自於elm（這裡就是作者說的來自於餓了麼的靈感啊），用於訂閱乙個資料來源，然後根據條件dispatch需要的action。資料來源可以是當前的事件，伺服器的websocket連線，keyboard輸入，history路由變化等等。

router：通過瀏覽器的history api可以監聽瀏覽器url的變化，從而控制路由相關操作

route components：

在dva中，通常需要connect model的元件都是route components，組織在/routes/目錄下面，在/commponent/目錄下面則是純元件

參考資料

atd+dva實戰

理解dva的8個概念

使用dva框架的總結

使用dva框架的總結

Dva使用總結

架構之 umi框架與dva的使用

使用dva框架的總結

使用dva框架的總結

Dva使用總結

架構之 umi框架與dva的使用

相關推薦