dva

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

使用dva

定義一個(gè)模型，有點(diǎn)像redux-toolkit。
使用connect連接

像redux的connect一樣連接。

啟動(dòng)。
然后如何派發(fā)action。

通過(guò)對(duì)應(yīng)的指令找到對(duì)印的reducer，派發(fā)。

dva的基本操作就是這樣，使用起來(lái)比較輕便。

實(shí)現(xiàn)dva

思路：封裝一個(gè)函數(shù)，創(chuàng)建store，通過(guò)model收集reducer和state，改變r(jià)educer中的方法名字。

首先是model。因?yàn)橛卸鄠€(gè)model，所以我們要收集起來(lái)。

先通過(guò)namesapce改變r(jià)ducer中的方法名字。

再將其保存起來(lái)。

然后通過(guò)Provider就可以注入進(jìn)去。

改造model的reducer,返回redux接受的reducer。此時(shí)model的state是不會(huì)變的，他只是初始的state，組件真正接受的是redux中的state。
這個(gè)getReducer只會(huì)調(diào)用一次，用來(lái)返回真正的reducer。

初步實(shí)現(xiàn)完畢。

支持異步

dva是集成redux-saga的，所以用法也類(lèi)似。

在創(chuàng)建model的時(shí)候可以通過(guò)effects創(chuàng)建saga中間件。然后派發(fā)對(duì)應(yīng)的action

實(shí)現(xiàn)

思路：處理每個(gè)model的effects，轉(zhuǎn)會(huì)為對(duì)應(yīng)的saga函數(shù)，采用takeEvery監(jiān)聽(tīng)每個(gè)屬性名（如asyncADD，轉(zhuǎn)化為takeEvery(‘a(chǎn)syncADD', ()=>{})等等），然后通過(guò)redux-saga提供的createSagaMiddleware創(chuàng)建一個(gè)中間件，利用run方法執(zhí)行各個(gè)model中的effects轉(zhuǎn)化后的saga函數(shù)。
代碼：

通過(guò)getSagas轉(zhuǎn)化每個(gè)model的effects并且存在一個(gè)數(shù)組里面，然后通過(guò)forEach一個(gè)個(gè)run起來(lái)。
看如何轉(zhuǎn)化

可以看到，每個(gè)model的effects會(huì)在getSaga被轉(zhuǎn)化為function*(){}，然后遍歷單個(gè)model的effects，對(duì)每個(gè)屬性都做比如*asyncADD(){}處理，如圖通過(guò)getWatcher返回個(gè)saga函數(shù)，通過(guò)fork開(kāi)啟一個(gè)子進(jìn)程，不會(huì)干擾主進(jìn)程的運(yùn)行。

而每個(gè)getWatcher返回的就是saga函數(shù)（generator函數(shù)）他會(huì)通過(guò)takeEvery監(jiān)聽(tīng)當(dāng)前的屬性（key）并且執(zhí)行后面那個(gè)effects。這里需要改造一下redux-saga的Put方法，使他單獨(dú)做一些prefixType的邏輯。
這樣就基本完成，每個(gè)model的effects都會(huì)被處理城saga函數(shù)去run，而且effects的每個(gè)方法都轉(zhuǎn)化為了key，通過(guò)takeEvery去監(jiān)聽(tīng)。這里還需要對(duì)effect的每個(gè)方法名加上前綴

這樣就大功搞成了。

可以正常運(yùn)行。

router的實(shí)現(xiàn)

使用沒(méi)什么區(qū)別
dva是繼承了connected-react-router的

所以用法跟其差不多，注意，異步的邏輯只能寫(xiě)在effects,reducer是同步的，不能繼續(xù)派發(fā)的。

實(shí)現(xiàn)：

基于connectd-react-router

還記得connectd-react-router怎么使用嗎，第一步，創(chuàng)建router對(duì)象。

第二步，使用中間件。

傳入api給app._router作為參數(shù)。這樣就完成了。

當(dāng)他派發(fā)push的時(shí)候會(huì)被路由中間件攔截處理，push到另一個(gè)頁(yè)面去。

到此這篇關(guān)于react dva實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react dva實(shí)現(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論