前言
最近一個月來使用 dva 對公司存量專案進行重構，比較少時間寫文章了。隨著9月開學季節的到來，最近在使用的幾個開源專案都迎來了重大更新。首先就是 umi 終於迎來了 2.0 版本，具體介紹可以檢視 釋出 umi 2.0，可插拔的企業級 react 應用框架。隨之而來的是使用 umi@2 構建的 ant design pro 2.0 版本，具體介紹可以檢視漂亮的實力派 Ant Design Pro 2.0 正式釋出。今天終於有時間體驗了 umi@2 ，想起我的 dva 學習之路的第一篇學習記錄是使用 umi@1.X 構建的，剛好可以使用 umi 2.0 重新構建一下。本文是 dva 作者 @sorrycc 的 umi-dva-user-dashboard 的 umi@2 版本實現，是 《umi + dva，完成使用者管理的 CURD 應用》 文章的 umi@2 版本改寫。程式碼倉庫： umi2-dva-user-dashboard。演示地址：demo。
Step 1. 使用 create-umi 腳手架初始化專案
使用 yarn create 命令：
$ mkdir umi2-dva-user-dashboard && cd umi2-dva-user-dashboard
$ yarn create umi
複製程式碼看到社群有小夥伴問到如何使用 npm 建立 umi 專案，首先使用 npm 安裝 create-umi :
$ cnpm install -g create-umi
複製程式碼安裝好之後，進入專案，然後執行 create-umi
$ cd umi2-dva-user-dashboard
$ create-umi
複製程式碼注意官方推薦使用
yarn create命令，因為能確保每次使用最新的腳手架。如果你和我一樣，公司是內網開發環境只有 npm 私服，可以嘗試使用 npm 命令。
完成上述操作後，進入 create-umi 互動式命令列，選擇功能，這裡選擇 antd、dva 和 hard source
確定後，會根據你的選擇自動建立好目錄和檔案：
然後手動安裝依賴：
$ yarn
複製程式碼或
$ cnpm install
複製程式碼安裝好依賴後啟動專案：
$ yarn start
複製程式碼或
$ npm start
複製程式碼如果順利，在瀏覽器開啟 http://localhost:8000 可看到以下介面:
Step 2. 配置代理，能通過 RESTFul 的方式訪問 http://localhost:8000/api/users
修改 .umirc.js ，加上 “proxy” 配置：
proxy: {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
},
複製程式碼注意，代理配置與 umi@1 的配置相同。
訪問 http://localhost:8000/api/users ，就能訪問到 jsonplaceholder.typicode.com/users 的資料。
Step 3. 生成 users 路由
umi 中檔案即路由，所以我們要新增路由，新建檔案即可，這裡使用約定式路由。詳見 umijs.org/zh/guide/ro… 。
新建 src/pages/users.js，內容如下：
export default () => {
return (
<div>
Users Page
</div>
)
}
複製程式碼然後訪問 http://localhost:8000/users ，你會看到 Users Page 的輸出:
這裡看到頁面多出了一個頭部，原來是 create-umi 腳手架生成的專案會預設生成一個全域性 layout 檔案 src/layouts/index.js, umi@1.X 版本就具有這個特性，詳見官方文件全域性layout
Step 4. 構造 users model 和 service
注意剛才建立的 src/pages/users.js 是簡單的頁面情況，目前需要和 model 與 service 組織到一起， 新建 src/pages/users/index.js 檔案，將 src/pages/users.js 內容複製到 src/pages/users/index.js 檔案中，然後刪除 src/pages/users.js 檔案。
create-umi 腳手架沒有生成 request.js, 新建 src/utils/request.js：
import fetch from `dva/fetch`;
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
/**
* Requests a URL, returning a promise.
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
* @return {object} An object containing either "data" or "err"
*/
export default async function request(url, options) {
const response = await fetch(url, options);
checkStatus(response);
const data = await response.json();
const ret = {
data,
headers: {},
};
if (response.headers.get(`x-total-count`)) {
ret.headers[`x-total-count`] = response.headers.get(`x-total-count`);
}
return ret;
}
複製程式碼新增 service: src/pages/users/services/users.js，注意 umi@2 新增了 webpack alias @，指向 src 目錄：
import request from `@/utils/request`;
export function fetch({ page = 1 }) {
return request(`/api/users?_page=${page}&_limit=5`);
}
複製程式碼注意這裡的
page引數預設為1，limit引數設定為5
新增 model: src/pages/users/models/users.js，內容如下：
import * as usersService from `../services/users`;
export default {
namespace: `users`,
state: {
list: [],
total: null,
},
reducers: {
save(state, { payload: { data: list, total } }) {
return { ...state, list, total };
},
},
effects: {
*fetch({ payload: { page } }, { call, put }) {
const { data, headers } = yield call(usersService.fetch, { page });
yield put({ type: `save`, payload: { data, total: headers[`x-total-count`] } });
},
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname, query }) => {
if (pathname === `/users`) {
dispatch({ type: `fetch`, payload: query });
}
});
},
},
};
複製程式碼切換到瀏覽器（會自動重新整理），應該沒任何變化，因為資料雖然好了，但並沒有檢視與之關聯。但是開啟 Redux 開發者工具，應該可以看到 users/fetch 和 users/save 的 action 以及相關的 state 。
Step 5. 新增介面，讓使用者列表展現出來（與umi@1相同）
我們把元件存在 src/pages/users/components 裡，所以在這裡新建 Users.js 和 Users.css。具體參考這個 Commit。
需留意兩件事：
- 對 model 進行了微調，加入了 page 表示當前頁
- 由於 components 和 services 中都用到了 pageSize，所以提取到
src/constants.js
改完後，切換到瀏覽器，應該能看到帶分頁的使用者列表。
有幾點需要注意：
- Users.js 裡面將 model 和元件連線了起來，注意
const { list, total, page } = state.users;裡面的users為model裡面的namespace名稱。- 我們沒有手動註冊 model，umi 幫我們進行了這一步操作， 詳見
src/pages/.umi/DvaContainer.js檔案，該檔案會自動更新。相關規則詳見 umi官網#model註冊 一節。- 可以直接使用 css module
Step 6. 新增 Header Menu
新增頭部選單元件，使得我們可以在首頁和使用者列表頁之間來回切換。
參考這個 Commit。
Step 7. 處理 loading 狀態（與umi@1相同）
dva 有一個管理 effects 執行的 hook，並基於此封裝了 dva-loading 外掛。通過這個外掛，我們可以不必一遍遍地寫 showLoading 和 hideLoading，當發起請求時，外掛會自動設定資料裡的 loading 狀態為 true 或 false 。然後我們在渲染 components 時繫結並根據這個資料進行渲染。
umi-plugin-dva 預設內建了 dva-loading 外掛。
然後在 src/components/Users/Users.js 裡繫結 loading 資料：
+ loading: state.loading.models.users,
複製程式碼注意這裡的 users 為 model 的 namespace, 所以 dva-loading 的 loading 狀態是對於 model 整體的。
具體參考這個 Commit 。
重新整理瀏覽器，你的使用者列表有 loading 了沒?
Step 8. 處理分頁（與umi@1相同）
只改一個檔案 src/pages/users/components/Users.js 就好。
處理分頁有兩個思路：
- 發 action，請求新的分頁資料，儲存到 model，然後自動更新頁面
- 切換路由 (由於之前監聽了路由變化，所以後續的事情會自動處理)
我們用的是思路 2 的方式，好處是使用者可以直接訪問到 page 2 或其他頁面。
quan參考這個 Commit 。
Step 9. 處理使用者刪除（與umi@1相同）
經過前面的 8 步，應用的整體脈絡已經清晰，相信大家已經對整體流程也有了一定了解。
後面的功能調整基本都可以按照以下三步進行：
-
service
-
model
-
component
我們現在開始增加使用者刪除功能。 -
service, 修改
src/pages/users/services/users.js：
export function remove(id) {
return request(`/api/users/${id}`, {
method: `DELETE`,
});
}
複製程式碼- model, 修改
src/pages/users/model.js：
*remove({ payload: id }, { call, put, select }) {
yield call(usersService.remove, id);
const page = yield select(state => state.users.page);
yield put({ type: `fetch`, payload: { page } });
},
複製程式碼- component, 修改
src/pages/users/components/Users.js，替換deleteHandler內容：
dispatch({
type: `users/remove`,
payload: id,
});
複製程式碼注意由於使用第三方api網站，資料並不會真的刪除，只是刪除api返回成功，選擇刪除後重新獲取資料，仍然是原來的資料。
Step 10. 處理使用者編輯（與umi@1相同）
處理使用者編輯和前面的一樣，遵循三步走：
- service
- model
- component
先是 service，修改src/pages/users/services/users.js：
export function patch(id, values) {
return request(`/api/users/${id}`, {
method: `PATCH`,
body: JSON.stringify(values),
});
}
複製程式碼再是 model，修改 src/pages/users/model.js：
*patch({ payload: { id, values } }, { call, put, select }) {
yield call(usersService.patch, id, values);
const page = yield select(state => state.users.page);
yield put({ type: `fetch`, payload: { page } });
},
複製程式碼最後是 component，詳見 Commit。
需要注意的一點是，我們在這裡如何處理 Modal 的 visible 狀態，有幾種選擇：
- 存 dva 的 model state 裡
- 存 component state 裡
另外，怎麼存也是個問題，可以：
- 只有一個 visible，然後根據使用者點選的 user 填不同的表單資料
- 幾個 user 幾個 visible
此教程選的方案是 2-2，即存 component state，並且 visible 按 user 存。另外為了使用的簡便，封裝了一個UserModal的元件。
完成後，切換到瀏覽器，應該就能對使用者進行編輯了。
Step 11. 處理使用者建立（與umi@1相同）
相比使用者編輯，使用者建立更簡單些，因為可以共用 UserModal 元件。和 Step 10 比較類似，就不累述了，詳見 Commit 。
到這裡，我們已經完成了一個完整的 CURD 應用。如果感興趣，可以進一步看下 dva 和 umi 的資料：
（完）
總結
本文主要使用umi@2來完成 umi-dva-user-dashboard 專案。可以看到在業務程式碼上，和umi@1的寫法基本一致，遷移成本比較低。目前手頭的專案正在使用dva進行重構，暫時還沒有使用 umi@2 的計劃，不過會持續關注 umi 的成長的。