Ant Design Pro 學習筆記：數據流向

在講這個問題以前，有一個問題應當講一下：

Ant Design Pro / umi / dva 是什麼關係？

 

首先是 umi / dva 的關係。

• umi 是一個基於路由的 react 開發框架。
• dva 是一個基於 redux 和 redux-saga 的數據流方案。

理論上說，他們是平級不重合的。

可是。

• umi 做爲開發框架，在做者設想的 react 依賴體系中是核心地位（相似於電腦中的主板），並且之後會有更多更全的功能。
• umi 是在 dva 以後開發的，並且做者是同一我的。

因此在這個體系中，umi 纔是核心。

包括 Ant Design Pro ，這個用 react 開發後臺管理系統的全家桶方案，也是用 umi 構建項目時的一個選項。

 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

 

---

 

如下才是正文：Ant Design Pro 的數據流向。

 

0 路由

首先，一個項目要先看路由。

路由和菜單是組織起一個應用的關鍵骨架，pro 中的路由爲了方便管理，使用了中心化的方式，在 config.ts 統一配置和管理。

在 umi 中，路由能夠用文件關係約定，也能夠顯式編寫。

在 Ant Design Pro 中，路由強制顯式編寫，多是由於方便維護。

知道了路由，就知道有哪些頁面了。

 

1 pages -> models

a. 

import { connect } from 'dva'

b. @connect 傳送數據。

參數對象中的值是 model.namespace。

返回對象：

• key 是 page.props.key
• value 是 model.states.value

c. 發起請求用 dispatch：

• type 是 model.effects.type
• payload 是可能須要的參數對象。

 

2 models -> service

a. 從 service 引入接口方法

import {/* and more */} from "..." 

b. effects:

• call 發起請求
• put 存入數據
• yield 異步變同步
• payload 組件 dispatch 時帶的參數

c. states: put 時存數據的地方

d. reducers : 整合以前累計的數據和從接口取到的數據，返回新的數據

 

若是你在開發的時候後端尚未寫好，須要前端模擬數據...

3  service -> mock

mock 中的接口名與 service 中的接口名相同便可

須要

import request from '@untils/request.js'

 

以上。