使用dva框架的總結

2022-04-25 05:32:02 字數 2642 閱讀 4430

最近的專案是react+dva+atd+webpack的乙個後台專案,剛接觸dva就感覺很喜歡,很簡潔用著很爽。

關於使用redux中的一些問題

1、檔案切換問題、

redux的專案通常喲啊分為reducer、action、saga、component等等,我們需要在檔案之間來回切換,並且檔案通常是分目錄存放:

+src

+sagas

-user.js

+reducers

-user.js

+actions

- user.js

所以我們要在幾個user.js中來回切換。

2、saga建立麻煩

在saga裡面監聽乙個action通常這樣寫

function *usercreate()  catch

(e) {}

}function *usercreatewatcher()

function *rootsaga()

對於redux-saga,這樣設計可以讓實現更加靈活,但實際專案中,大部分場景只需要用到takeevery和takelatest就足夠了,每個action的監聽都需要這麼寫就顯得有些冗餘。

3、enrty建立麻煩

除了redux store的建立,中介軟體的配置,路由的初始化。provider的store的繫結,saga的初始化,還要處理reducer、component、saga的hmr,看起來比較複雜

dva就是基於redux、redux-saga和react-router的輕量級前端框架

看下dva是如何來使用的

一、首先是定義路由,組成應用的不同頁面

定義路由元件,新增路由資訊到路由表,編輯router.js

二、編寫ui元件

三、定義model,處理資料和邏輯

通過model的概念吧乙個領域的模型管理起來,包含同步更新state的reducers,處理非同步邏輯的effects,訂閱資料來源的subscriptions

四、connect起來

單獨完成了model和component,使用dva提供的connect方法,其實這個connect就是react-redux的connect

最好的學習方式就是自己先實現乙個demo,有興趣在antd的文件裡有,可以動手敲一下

看一下幾個api來感受下dva的框架思想

資料流向

資料的改變發生通常是通過使用者互動行為或者瀏覽器的行為(如路由跳轉等)觸發,可以通過dispatch發起乙個action,如果是同步行為會直接通過reducer改變state,如果非同步行為(***)會先觸發effects,然後通過reducer最終改變state,所以在dva中,資料流向非常清晰簡明

state表示model的狀態資料,通常表現為乙個js物件

action是乙個普通的js物件,他是改變state的唯一途徑。無論是ui事件,網路**,還是websocket等資料來源所獲取的資料,最終都會通過dispatch函式呼叫乙個action,從而改變對應資料。action必須帶有type屬性指明具體的行為,其他字段可以自定義,如果發起乙個action需要使用dispatch函式,dispatch是在元件connect model以後,通過props傳入的

dispatch函式,action是改變state的唯一途徑,但是他只是描述了乙個行為,dispatch可以看做是觸發這個行為的方式,而reducer則是描述如何改變資料的

在dva中,connect model的元件通過props可以訪問到dispatch,可以呼叫model中的reducer或者effects,常見的形式

dispatch(, //

需要傳遞的資訊

});

reducer:接受兩個引數,之前累積運算的結果和當前想要被累積的值,返回的是累積的結果,reducer來自於函式式程式設計,reducer是純函式,不應該產生任何***,每次運算都是返回乙個全新的資料

effect: 被稱為***,在應用中,最常見的就是非同步操作。來自於函式程式設計的概念

subscription

是一種從源獲取資料的方法,來自於elm(這裡就是作者說的來自於餓了麼的靈感啊),用於訂閱乙個資料來源,然後根據條件dispatch需要的action。資料來源可以是當前的事件,伺服器的websocket連線,keyboard輸入,history路由變化等等。

router:通過瀏覽器的history api可以監聽瀏覽器url的變化,從而控制路由相關操作

route components

在dva中,通常需要connect model的元件都是route components,組織在/routes/目錄下面,在/commponent/目錄下面則是純元件

參考資料

atd+dva實戰

理解dva的8個概念

使用dva框架的總結

最近的專案是react dva atd webpack的乙個後台專案,剛接觸dva就感覺很喜歡,很簡潔用著很爽。關於使用redux中的一些問題 1 檔案切換問題 redux的專案通常喲啊分為reducer action saga component等等,我們需要在檔案之間來回切換,並且檔案通常是分目...

Dva使用總結

subscription 語義是訂閱,用於訂閱乙個資料來源,然後根據條件 dispatch 需要的 action。資料來源可以是當前的時間 伺服器的 websocket 連線 keyboard 輸入 geolocation 變化 history 路由變化等等。例 監聽路由變化,一旦跳轉到 treat...

架構之 umi框架與dva的使用

首先申明 這是乙個由 umi antdesign dva 構成的專案,本節內容主要講述的是,搭建乙個做到 元件 請求介面資料 資料管理模型 mock 資料 的簡潔 科學 有效的邏輯結構,以及怎麼實現它,它有什麼優點。目錄結構如下 action customer.js 檔案 上文的順序是按照資料活動的...