dva

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

使用dva

定義一個模型，有點像redux-toolkit。
使用connect連接

像redux的connect一樣連接。

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

通過對應的指令找到對印的reducer，派發(fā)。

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

實現(xiàn)dva

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

首先是model。因為有多個model，所以我們要收集起來。

先通過namesapce改變rducer中的方法名字。

再將其保存起來。

然后通過Provider就可以注入進去。

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

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

支持異步

dva是集成redux-saga的，所以用法也類似。

在創(chuàng)建model的時候可以通過effects創(chuàng)建saga中間件。然后派發(fā)對應的action

實現(xiàn)

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

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

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

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

這樣就大功搞成了。

可以正常運行。

router的實現(xiàn)

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

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

實現(xiàn)：

基于connectd-react-router

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

第二步，使用中間件。

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

當他派發(fā)push的時候會被路由中間件攔截處理，push到另一個頁面去。

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

最新評論