umi+dva數據流實戰，學會了之後你會發現比react-redux好用數倍！

前文介紹

umi框架是由 react + react-route + webpack等進行的封裝，而dva則是基於redux和redux-saga的數據流方案，此外dva還額外集成了react-router和fetch。

建立和啓動項目腳手架

先建立一個空的文件夾

$ mkdir new-umi-dva複製代碼

進入此時建立好的文件夾裏，建立umi+dva項目

$ cd new-umi-dva
$ yarn create umi複製代碼

後面選項選擇

建立完成之後執行

yarn or cnpm i  //下載依賴
npm start //啓動項目 默認啓動網址是 http://localhost:8000複製代碼

如今來寫一個根據用戶名id查詢當前我的信息的功能

項目的目錄結構：

一個完整的React頁面就是View + Service + Model ，分別對應着index.jsx，service.js，model.js。

index.js

service.js

model.js

代碼思路總結：

index.js編寫完UI組件後，輸入用戶ID的事件觸發以前userView是空的集合。輸入用戶ID的事件觸發以後，因爲用了dva引入的connect裝飾器，能夠隨意在函數裏使用this.props.dispatch，這時觸發dispatch函數到了model.js的effects裏的getViewModel函數裏，執行到yield call的時候去觸發service.js的函數發送網絡請求，再根據服務端的返回數據判斷是否去執行yield put操做。若是response.res返回值爲true, 則執行yield put操做到reducers的getViewReducer()去更新state裏的view數據，當state的值更新之後，就會從新將state.view賦值到index.js的this.props.userView，這時候就取到當前用戶ID的我的信息了。

若有錯誤或者缺漏，歡迎指點！