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'

 

以上。