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方法進行重新渲染 –> 頁面更新

相關鏈接

https://ant.design/docs/react/practical-projects-cn

https://pro.ant.design/docs/layout-cn

React + Dva + Antd + Umi 概況