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實現的文章就介紹到這瞭,更多相關react dva實現內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- React路由中的redux和redux知識點拓展
- 詳解React 和 Redux的關系
- React各種狀態管理器的解讀及使用方法
- React全局狀態管理的三種底層機制探究
- react+ts實現簡單jira項目的最佳實踐記錄