Dva
由阿里架構師 sorrycc 帶領 team 完成的一套前端框架，在作者的 github 里是這么描述它的：”dva 是 react 和 redux 的最佳實踐”。
Antd
是阿里的一套開箱即用的中台前端/設計解決方案，UI框架。
Umi
一套可插拔的企業級 react 應用框架，同樣由dva作者 sorrycc 完成。他在Umi中引入了 UI 工具 antd，打包工具 roadhog，路由 react-router和狀態管理器 dva，做到了可插拔機制。
Dva 初實踐
一般來說，可以分為主要的三個部分，models、services 和 views。其中，
views負責頁面上的展示，這個不做贅述；
services里面主要寫一些請求后台接口的方法；
models是其中最重要的概念，這里存放了各種數據，並對數據進行相應的交互。
view層
import React, { Component } from 'react';
import { Form, Input } from 'antd';
import { connect } from 'dva/index';
@Form.create()
class View extends Component {
render() {
return(
<div>
<Form>
<FormItem label="commitMessage" {...formItemLayout}>
{getFieldDecorator('commitMessage', {
rules: [{ type: 'string' }]
})(<Input />)}
</FormItem>
</Form>
</div>
);
}
}
const mapStateToProps = state => {
const {
checkBranches
} = state.projects;
return {
checkBranches
};
};
export default connect(mapStateToProps)(View);
View層負責頁面的展示問題，如React寫法一致，最后通過connect方法應用model層的數據。
Service層
import request from '@src/utils/request';
export function checkBranches({ id }) {
return request(`/projects/${id}/branches`, {
method: 'GET',
headers: {
'Content-type': 'application/json'
}
});
}
Service層主要負責存放請求后台接口的方法。
這里的request封裝了fetch函數，返回的是一個promise對象。
request中傳入兩個參數，第一個是url是請求地址，第二個options是請求的參數，看情況傳入，比如說這里傳入了method和headers。
Model層
import * as services from '@services/index';
export default {
namespace: '',
state: {},
reducers: {},
effects: {}.
subscriptions: {}
}
model里面包括以下五部分：namespace、state、reducers、effects、subscriptions，缺一不可。注意，這里也需要從service層導入相應的方法。
- namespace 命名空間
namespace: 'projects'
- state 相當於原生React中的state狀態，用於存放數據的初始值（也是向外暴露的可訪問字段）。
state: {
projectsData: []
}
- reducers 用於存放能夠改變view的action，這里按照官方說明，不應該做數據的處理，只是用來return state，從而改變view層的展示。
reducers: {
getProjectAllData(state, action) {
return { ...state, ...action.payload };
},
}
- effects 用於和后台交互，是處理異步數據邏輯的地方。
effects: {
*getAllProjects({ payload = {} }, { call, put }) {
try {
const res = yield call(projectsService.checkBranches, payload);
yield put({
type: 'getProjectData',
payload: {
projectsData: res.data
}
});
} catch (e) {
message.warning(e.message);
}
},
}
- subscriptions 訂閱監聽，比如監聽路由，進入頁面如何如何，就可以在這里處理。相當於原生React中的componentWillMount方法。就比如上述代碼，監聽/project路由，進入該路由頁面后，將發起getAllProjects aciton，獲取頁面數據。
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === '/projects') {
dispatch({
type: 'getAllProjects'
});
}
});
}
}
Dva 數據流向
總的來說如下：
View層操作 –> 觸發models層effect中方法 –> 觸發service層請求，獲取后台數據 –> 觸發model層處理相應數據的方法，
存儲至reducer中 –> 更新model層中state –> 觸發view層的render方法進行重新渲染 –> 頁面更新