Dva 簡介

? ?dva 首先是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，dva 還額外內置了 react-router 和 fetch，所以也可以理解為一個輕量級的應用框架。

整合流程

dva目前最新版本是：2.6.0-beta.19

01安裝依賴

執(zhí)行如下的命令：

安裝完成之后，會在package.json文件里面出現(xiàn)dva的依賴。

02編寫組件

??

03定義model

說明

符合以下規(guī)則的文件會被認為是 model 文件，

• src/models?下的文件

• src/pages?下，子目錄中 models 目錄下的文件

• src/pages?下，所有 model.ts 文件

比如：

+ src
?+ models/a.ts
?+ pages
? ?+ foo/models/b.ts
? ?+ bar/model.ts


其中?a.ts，b.ts?和?model.ts?如果其內容是有效 dva model 寫法，則會被認為是 model 文件。

? 這里我們直接在src目錄里面創(chuàng)建一個models文件夾，然后在里面編寫代碼。

? ?

? ? ? ? ??

04使用connect 將組件和model連接起來

? ?將我們上面寫的組件進行如下的調整：

最終該組件的完整代碼如下：

溫馨提示

這里的connect函數(shù)一定要是dva里面的。否則是不能達到我們想要的效果的。

05編寫接口

這里直接用mock數(shù)據(jù)。省去我們編寫的過程。mock的代碼如下：

最后，啟動項目查看看效果。點擊首頁的按鈕。程序運行成功之后，頁面展示的效果如下：