react dva實現的代碼怎么編寫

今天就跟大家聊聊有關react dva實現的代碼怎么編寫，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

dva

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

使用dva

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

像redux的connect一樣連接。

啟動。
然后如何派發action。

通過對應的指令找到對印的reducer，派發。

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

實現dva

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

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

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

再將其保存起來。

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

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

初步實現完畢。

支持異步

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

在創建model的時候可以通過effects創建saga中間件。然后派發對應的action

實現

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

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

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

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

這樣就大功搞成了。

可以正常運行。

router的實現

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

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

實現：

基于connectd-react-router

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

第二步，使用中間件。

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

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

看完上述內容，你們對react dva實現的代碼怎么編寫有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。