0 1

dva的介紹

官方文檔：

https://dvajs.com/guide/

背景：

使用redux-saga需要在action , reducers,saga三個(gè)文件中切換，而可以使用dva框架來(lái)簡(jiǎn)化這一個(gè)過(guò)程.

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

0 2

dva的安裝

通過(guò) npm 安裝 dva-cli 并確保版本是 0.9.1 或以上。

安裝dva

創(chuàng)建項(xiàng)目

0?3

dva的目錄結(jié)構(gòu)

0?4

models文件介紹?

model模塊的寫法：

namespace: 命名空間，后續(xù)我們?nèi)〉脭?shù)據(jù)的時(shí)候要注意加上命名空間

state: 狀態(tài)，即數(shù)據(jù)

subscriptions：這里的方法，直接就會(huì)執(zhí)行，一般用于數(shù)據(jù)的初始化

reducers: 純函數(shù)，如果有異步，必須借助effect?

effects：副作用（業(yè)務(wù)邏輯，包含同步和異步）

? ? ? ?這里的鍵名，就是action中type的字段

? ? ??payload: action傳參數(shù)，都放在這里

? ? ??call() :? 表示調(diào)用異步函數(shù)

? ? ? ? ? ? ? ??如果yield call的是一個(gè)Promise對(duì)象，那只有在Promise返回的是resolve方法的情況下，下面跟著的yield put及后面的代碼才會(huì)執(zhí)行，若返回了rejector則后面的代碼則全部停止執(zhí)行

? ? ??put?表示 dispatch action，其他的還有 select, take, fork, cancel 等

? ? ??注：yield put直接調(diào)用reducer，是堵塞的，同步,

? ? ? ? ? ? ?調(diào)用非reducer函數(shù)，是非堵塞的，異步

? ? ? ? ? ? ?使用put.resolve ，堵塞的，同步

model模塊的寫法，如下：

0?5

services 請(qǐng)求數(shù)據(jù)

將請(qǐng)求后臺(tái)數(shù)據(jù)的方法，全部提取到services文件夾中

代碼如下：

0 6

util 公共文件

將提取的一些公共方法放在此文件夾中

如：封裝的請(qǐng)求方法request.js：

0 7

router.js 路由設(shè)置文件

與react-router-dom v5?語(yǔ)法相似，只是已經(jīng)將其它封裝到dva中，所以要從dva中去引用router.

代碼如下：

0 8

組件中的路由跳轉(zhuǎn)

NavLink, Route,Redirect等，與react中的react-router-dom v5 語(yǔ)法一致

注:?最新的react-router-dom v6的語(yǔ)法與v5還是有很大的不同

0?9

index.js 入口文件

model()：注入數(shù)據(jù)，需要哪一個(gè)models中的數(shù)據(jù) ，就必須在入口中對(duì)其進(jìn)行注入，可以與之的Provider關(guān)聯(lián)起來(lái)

router(): 引用設(shè)置路由的文件

0?9

routes文件夾，類似pages

和react 組件的寫法一樣，對(duì)于model中的狀態(tài)使用，也使用connect方法，與redux的使用方法相似

代碼如下：

總結(jié)?

dva框架介紹完成，希望通過(guò)本文能讓大家對(duì)dva框架有個(gè)基本了解

更多內(nèi)容，請(qǐng)關(guān)注公主號(hào)：bug收集?