您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關react dva實現(xiàn)的代碼怎么編寫,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據(jù)這篇文章可以有所收獲。
dva是一個基于redux和redux-saga的數(shù)據(jù)流方案,然后為了簡化開發(fā)體驗,dva額外內置了react-router,fetch,可以激烈為一個輕量級的應用框架。
定義一個模型,有點像redux-toolkit。
使用connect連接
像redux的connect一樣連接。
啟動。
然后如何派發(fā)action。
通過對應的指令找到對印的reducer,派發(fā)。
dva的基本操作就是這樣,使用起來比較輕便。
思路:封裝一個函數(shù),創(chuàng)建store,通過model收集reducer和state,改變reducer中的方法名字。
首先是model。因為有多個model,所以我們要收集起來。
先通過namesapce改變rducer中的方法名字。
再將其保存起來。
然后通過Provider就可以注入進去。
改造model的reducer,返回redux接受的reducer。此時model的state是不會變的,他只是初始的state,組件真正接受的是redux中的state。
這個getReducer只會調用一次,用來返回真正的reducer。
初步實現(xiàn)完畢。
dva是集成redux-saga的,所以用法也類似。
在創(chuàng)建model的時候可以通過effects創(chuàng)建saga中間件。然后派發(fā)對應的action
實現(xiàn)
思路:處理每個model的effects,轉會為對應的saga函數(shù),采用takeEvery監(jiān)聽每個屬性名(如asyncADD,轉化為takeEvery(‘asyncADD', ()=>{})等等),然后通過redux-saga提供的createSagaMiddleware創(chuàng)建一個中間件,利用run方法執(zhí)行各個model中的effects轉化后的saga函數(shù)。
代碼:
通過getSagas轉化每個model的effects并且存在一個數(shù)組里面,然后通過forEach一個個run起來。
看如何轉化
可以看到,每個model的effects會在getSaga被轉化為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的每個方法都轉化為了key,通過takeEvery去監(jiān)聽。這里還需要對effect的每個方法名加上前綴
這樣就大功搞成了。
可以正常運行。
使用沒什么區(qū)別
dva是繼承了connected-react-router的
所以用法跟其差不多,注意,異步的邏輯只能寫在effects,reducer是同步的,不能繼續(xù)派發(fā)的。
基于connectd-react-router
還記得connectd-react-router怎么使用嗎,第一步,創(chuàng)建router對象。
第二步,使用中間件。
傳入api給app._router作為參數(shù)。這樣就完成了。
當他派發(fā)push的時候會被路由中間件攔截處理,push到另一個頁面去。
看完上述內容,你們對react dva實現(xiàn)的代碼怎么編寫有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。