技術資料
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中來的
相關地址:react-router dva初始化
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的方式 傳遞進去
相關文章:antd表單組件
登錄
因為我們是一個表單登錄頁面 所以 當我們點擊登錄的時候 需要發送一條dispatch給model那邊 然后通過他來實現頁面的跳轉
先來看看如何發送數據
因為使用了antd的關系 所以表單部分 可以說是被無限的弱化了 你現在 不需要關心任何事情 他都會幫你搞定 具體相關的api 可以看上面發的那個鏈接
來看看消息發送的部分
這里其實 很簡單 因為antd已經幫我們做了處理 我們可以在他們提供的表單組件中 進行相關的配置 而所有的數據 他都會通過這個來直接返回過來
所以我們只需要在這邊進行一下判斷即可 如果產生了錯誤就直接返回
否則執行dispatch 發送一條action給對應的model那邊 然后在那邊做出相應的判斷
model部分
首先 一般介紹的文章都會寫的很詳細 但是對於新手來說 有可能會無從下手
所以 我們在接觸到我們不熟悉的東西的時候 最好能用自己習慣的一種語言去解釋他 這樣也方便學習 按功能 我們依次下來
reducers 處理數據
effects 接收數據
subscriptions 監聽數據
通過這樣的解釋是不是稍微能對其有個大概的了解 每個都是按照功能分類的 所以 盡量 不要在不歸他管的地方 做其他的事情
還記得 我們剛才發送數據的那個命令嗎 我們在來看一下
dispatch 是根據你里面設置的type內容 然后轉發到指定的model的 所以你這邊 要設置正確以后 在model那邊才能接收到你發送的這條action
login就是我們處理接收消息的地方
在這里 又遇見了幾個新的單詞 put call
其實 不止這幾個
一般常用的有put call select take
當然 在這個上面 還有一些基於這些函數 封裝的高階函數
相關文章:github.com/dvajs/dva/blob/master/test/effects-test.js
簡單來說一下 這幾個函數的大概內容
put 用來發起一條action
call 以異步的方式調用函數
select 從state中獲取相關的數據
take 獲取發送的數據
當我們使用put發送一條action的時候 與之對於的reducers就會接收到這個消息 然后在里面返回state等數據
這里有一點 reducers中盡量只做state的數據返回 而不要在這里寫相關的邏輯
對於路由跳轉的部分 我們使用這樣來實現
當我們執行這個命令的時候 因為我們的router已經相互綁定起來了 所以他會自動調用router中的數據來進行展示
ok 總體就這么多吧 是不是感覺很簡單
我自己個人覺得 毫無難點 入門簡直 不要太方便
我相信 只要仔細看完我所有寫的 dva的所有功能都將可以掌握