1.src/models

  在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的:

  1.UI 组件交互操作;
  2.调用 model 的 effect;
  3.调用统一管理的 service 请求函数;
  4.使用封装的 request.ts 发送请求;
  5.获取服务端返回;
  6.然后调用 reducer 改变 state;
  7.更新 model。

 // model
{
namespace: String, // 命名空间
state: Object, // 状态
reducer: Object, // 同步更新 state
effects: Object, // 副作用:处理异步逻辑
subscriptions: Object // 订阅数据源
} 

  这些文件被引用在src/pages/.umi/dva中。

  我们以 models/global 为例:

  namespace: 'global' 说明以下此处的dva命名空间为 global,即你调用的时候需要采用 global.XXX 的形式

  其中的 state: {} 是存放状态的,也就是数据。

  reducers 是用来更新 state 的,但是他只能是同步的。所以我们需要 effects 来进行异步更新。

  即:

 state: {
collapsed: false,
notices: [],
}, // 存放状态和数据
reducers: { // 用来同步设置state
changeLayoutCollapsed(
state = {
notices: [],
collapsed: true,
},
{ payload },
) {
return { ...state, collapsed: payload };
}, saveNotices(state, { payload }) {
return {
collapsed: false,
...state,
notices: payload,
};
},
// ...
}
   effects: { // 异步更新state,通过调用同步的reducers实现
*fetchNotices(_, { call, put, select }) {
const data = yield call(queryNotices);
yield put({
type: 'saveNotices',
payload: data,
});
const unreadCount = yield select(
state => state.global.notices.filter(item => !item.read).length,
);
yield put({
type: 'user/changeNotifyCount',
payload: {
totalCount: data.length,
unreadCount,
},
});
},
// ...
}

关于react中antd design pro下面src/models的更多相关文章

  1. react中antd+css Module一起使用

    antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules. 使用 exclude 和 include 配置参考(https:/ ...

  2. react使用ant design pro时的滑动图片组件

    react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...

  3. 记录学习antd design pro dva的过程,主要记错, 多图预警,如有理解偏差,忘指出,多谢!

    首要问题: 如何增加菜单项 答案: 在router.config中添加路由,在locales语言国际化增加选项 问题1: 答案1: 问题2: 这个要修改state,正确写法 存在的疑惑:为什么不能直接 ...

  4. react中antd的表格自定义展开

    antd的表格官方案例中给出的都是固定的图表展开,在做需求的时候,需要使用点击最后一列,然后出现展开内容,实现效果图如下 在最开始设置一个全局变量 const keys = [];在设置列参数的函数中 ...

  5. Ant Design Pro (中后台系统)教程

    一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么:  https://www.cnblogs ...

  6. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行

    ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以 ...

  7. pro.antd.design

    有关react的ui组建antd.design新推出的pro版本,最近用到了路由方面. common与routes; 首先需要在menu.js里面配置: { name: '精品', icon: 'da ...

  8. Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)

    Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...

  9. (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建

    首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...

随机推荐

  1. js怎么删除数组元素,有哪些删除元素方法

    JavaScript删除元素方法 1.根据索引删除数组元素 delete 数组[索引]   *注意delete 后面是空格 var arr1=["aa","bb" ...

  2. 用js写出一个漂亮的单选框选中效果

    一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...

  3. msf的rpc和json-rpc,我该选择哪个?

    msf的rpc有两种调用方式,那么我们应该调用哪一个呢? 其中restful接口暂且不谈,这个rest api其实是简单对接了一下msf的后端数据库,这个自己也能读数据库来做,这个以后有时间再谈 首先 ...

  4. Centos7 使用 Ansible 批量安装中文字体

    需求背景 Centos7 下 Java 生成图片水印时中文乱码,原因是没有安装中文字体. 安装中文字体 以下是基于 Centos7 手动安装中文字体的详细步骤.当测试或者生产环境服务器比较多的时候,建 ...

  5. [hdu5402 Travelling Salesman Problem]YY

    题意:给一个n*m的矩形,每个格子有一个非负数,求一条从(1,1)到(n,m)的路径(不能经过重复的格子),使得经过的数的和最大,输出具体的方案 思路:对于row为奇数的情况,一行行扫下来即可全部走完 ...

  6. calc less 下不起作用

    在 less中不能使用css3 calc属性不能 css3 新增长度计算属性 可以根据不同单位计算宽度 .test{ width: calc(100% - 150px); } 但是当我们在less中使 ...

  7. 使用IDEA远程向伪分布式搭建的Hadoop提交MapReduce作业

    环境 VirtualBox 6.1 IntelliJ IDEA 2020.1.1 Ubuntu-18.04.4-live-server-amd64 jdk-8u251-linux-x64 hadoop ...

  8. 【蓝桥杯C组】备赛基础篇之高精度算法

    一.高精度加法 思路: 运用vector数组(c选手可用len来记录数组长度,数组去保存数字)将存入字符串里面的数字符倒叙保存,按照小学的加法列式,相加保存进位即可.具体参考代码. 详细代码解析: # ...

  9. VMware Tanzu已融合云原生与K8s 市场前景尚不确定

    Tanzu是什么? Tanzu 结合了Wavefront IT监控的项目和产品,VMware于2017年5月收购了该软件,并加入了Cloud Foundry PaaS实用工具.VMware在2019年 ...

  10. 使用GitHub的API实现文件上传--李渣渣(lizaza.cn)

    最近搭建了一个自己的博客网站和一个在线图片格式转换工具,经常写博客的时候需要上传图片,在线转换工具也需要一定的空间来临时存放图片文件.服务器的存储空间又比较有限,于是就想着将图片存储的GitHub上, ...