Ant Design Pro 页面接口调用（2）

1. 什么是Ant Design Pro

Ant Design Pro是一款搭建中后台管理控制台的脚手架，基于React,dva.js,Ant Design

其中dva主要是控制数据流向，是纯粹的数据流，用作状态管理，详细介绍请参考官方文档：https://dvajs.com/guide/

使用React技术栈管理大型复杂的应用往往要使用Redux来管理应用的状态，然而随着深度使用，Redux也暴露出了一些问题。dva 是一种改良Redux的架构方案，是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，简化了redux和redux-saga使用上的诸多繁琐操作。

ant design是一个基于react打造的一个服务于企业级产品的UI框架。

2. 什么是umi

umi：是以路由为基础，用来控制路由，它是将dva React Redux 包装起来的框架，详细介绍请参考官方文档：https://umijs.org/zh-CN/docs

2. 1 umi中connect的用法

connect的作用是将组件和models结合在一起。将models中的state绑定到组件的props中。并提供一些额外的功能，譬如dispatch。通过connect来绑定model state。意味着Component里可以拿到Model中定义的数据，Model中也能接收到Component里dispatch的action。实现了Model和Component的连接。注意@connect必须放在export default class前面

使用：

import { connect } from 'umi';

@connect(({ insightPointHome }) => ({
  cityList: insightPointHome.cityList,
}))

2. 2 umi中history的用法

可用于获取当前路由信息，

import { history } from 'umi';
// history 栈里的实体个数
console.log(history.length);
// 当前 history 跳转的 action，有 PUSH、REPLACE 和 POP 三种类型
console.log(history.action);
// location 对象，包含 pathname、search 和 hash
console.log(history.location.pathname);
console.log(history.location.search);
console.log(history.location.hash)

可用于路由跳转

import { history } from 'umi';
// 跳转到指定路由
history.push('/list');
// 带参数跳转到指定路由
history.push('/list?a=b');
history.push({
  pathname: '/list',
  query: {
    a: 'b',
  },
});
// 跳转到上一个路由
history.goBack();

可用于路由监听

import { history } from 'umi';
const unlisten = history.listen((location, action) => {
  console.log(location.pathname);
});
unlisten();

3. 实践

使用Ant Design pro脚手架官网来搭建项目，其中最重要的三个文件夹，services、models、mock、pages

sevices：数据接口
models：数据处理
mock：模拟数据
pages：页面

pages触发models中的方法来处理数据，若为异步操作在models中需要调用services中的数据接口方法，在后台未写完时可以通过mock中的模拟数据来调试
具体来说，也即是使用dva时，数据流向或者说触发流程为：在pages中的jsx文件中通过dispatch触发models中的js文件中的effects或者reducers中的方法，其中effects中的方法是异步操作，通过yield call(调用接口函数方法名)调用从services中js文件引入的定义好的调用接口方法，然后通过yield put({type: 'reduceres中的方法'})；来触发 reducers中的方法来修改state。

数据流向图如下:

数据的改变发生通常是通过：

用户交互行为（用户点击按钮等）
浏览器行为（如路由跳转等）触发的

当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State 。

最后编辑于：2020.09.02 20:05:37