前言

技術資料

react + dva + redux + react-router + redux-sage + antd + antd動畫

總的來說dva是一個很簡單的專案 一步步跟大家來說一下把

效果圖

初始化環境配置

因為專案中使用了antd的關係 所以 這邊需要做一下設定 才可以正常使用

檔名稱是:.roadhogrc

目錄結構

初始化dva

初始化部分 非常簡單 首先一個個來說明一下

1.const app = dva()

這部分是用來做dva初始化的部分 先給大家看一下完整的介面

在這裡 你可以設定全域性state 全部error 還有包括router的事件 state的事件 等等 

都可以直接統一的在這邊進行設定與管理

還有history這個引數是從react-router中來的

2.app.use

這個是用來載入外掛的 因為我這個專案沒用到什麼其他的redux第三方中介軟體 所以這邊直接忽略

3.app.model

這個是用來接收你傳送的action的

相關連結:model

4.app.router

在這裡面 進行你所有頁面的初始化路由設定

這裡有兩種寫法

寫法1：

寫法2:

下面這種是按需載入的 所有 效能會比上面的那種 要高很多 尤其是你的頁面比較重的時候

ok初始化部分全部講完了 現在來看看ui部分

UI程式碼

這個是我的一個完全簡化版 不含裡面的內容 因為UI部分 我想搞前端的人 應該都會 所以就來講點跟dva有關係的

我想 如果沒有接觸過這種寫法的人 肯定會感覺很納悶吧 這是啥招 不知道在幹嗎啊 來看看 說明

首先說一下 這個寫法的優點跟缺點

優點：

因為這樣寫的話 就是一個function 所以react在判斷的時候 會直接省略生命週期的部分 從而 可以大大的加快載入速度

缺點：

缺點就是 你無法使用this,也沒有辦法使用生命週期 

所以 如果你的頁面 必須要使用生命週期的話 還是用class吧 

connect

這個其實很好理解

如果說你的ui裡面需要用到model裡面的資料的話 那麼就可以直接用這個 將model裡面的元素 當做props的方式 傳遞進來

如果你只想接管一個app的model的話

connect(({app}) => ({app})

如果你想接管多個 直接在app後面新增即可

至於另外的form.create部分 因為這裡使用到了一個antd的表單元件

所以需要用form.create的方式 將裡面的內容以props的方式 傳遞進去

登入

因為我們是一個表單登入頁面 所以 當我們點選登入的時候 需要傳送一條dispatch給model那邊 然後通過他來實現頁面的跳轉

先來看看如何傳送資料

因為使用了antd的關係 所以表單部分 可以說是被無限的弱化了 你現在 不需要關心任何事情 他都會幫你搞定 具體相關的api 可以看上面發的那個連結

來看看訊息傳送的部分

這裡其實 很簡單 因為antd已經幫我們做了處理 我們可以在他們提供的表單元件中 進行相關的配置 而所有的資料 他都會通過這個來直接返回過來

所以我們只需要在這邊進行一下判斷即可 如果產生了錯誤就直接返回 

否則執行dispatch 傳送一條action給對應的model那邊 然後在那邊做出相應的判斷

model部分

首先 一般介紹的文章都會寫的很詳細 但是對於新手來說 有可能會無從下手 

所以 我們在接觸到我們不熟悉的東西的時候 最好能用自己習慣的一種語言去解釋他 這樣也方便學習 按功能 我們依次下來

reducers 處理資料

effects   接收資料

subscriptions 監聽資料

通過這樣的解釋是不是稍微能對其有個大概的瞭解 每個都是按照功能分類的 所以 儘量 不要在不歸他管的地方 做其他的事情

還記得 我們剛才傳送資料的那個命令嗎 我們在來看一下

dispatch 是根據你裡面設定的type內容 然後轉發到指定的model的 所以你這邊 要設定正確以後 在model那邊才能接收到你傳送的這條action

login就是我們處理接收訊息的地方

在這裡 又遇見了幾個新的單詞 put call

其實 不止這幾個 

一般常用的有put call select take 

當然 在這個上面 還有一些基於這些函式 封裝的高階函式

簡單來說一下 這幾個函式的大概內容

put  用來發起一條action

call 以非同步的方式呼叫函式

select 從state中獲取相關的資料

take 獲取傳送的資料

當我們使用put傳送一條action的時候 與之對於的reducers就會接收到這個訊息 然後在裡面返回state等資料

這裡有一點 reducers中儘量只做state的資料返回 而不要在這裡寫相關的邏輯

對於路由跳轉的部分 我們使用這樣來實現

當我們執行這個命令的時候 因為我們的router已經相互繫結起來了 所以他會自動呼叫router中的資料來進行展示

ok 總體就這麼多吧 是不是感覺很簡單

我自己個人覺得 毫無難點 入門簡直 不要太方便

我相信 只要仔細看完我所有寫的 dva的所有功能都將可以掌握