004-ant design -dispatch、request、fetch
一、dispatch 函数
typedispatch = (a: Action) => Action
dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。
在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者Effects,常见的形式如:
dispatch({
type:'user/add', // 如果在 model 外调用,需要添加 namespace
payload: {}, // 需要传递的信息
});
二、页面过程梳理
页面→dispatch→model→service
在页面的生命周期中使用this.props,可以获取到dispatch。这里dispatch通常调用models模型。
页面的调用
const { dispatch } = this.props;
dispatch({
type: 'xxModel/fetch',
payload: { ...params },
});
model调用
import { queryList,} from '@/services/xxServiceApi'; export default {
namespace: 'xxModel', state: {
data: {
list: [],
pagination: {},
},
}, effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryList, payload);
yield put({
type: 'serverHandler',
payload: { data:response.data },
});
},
}, reducers: {
serverHandler(state, { payload }) {
return {
...state,
...payload,
};
},
},
};
service调用【在services文件夹下,xxServiceApi.js】
import request from '@/utils/request'; export async function queryList() {
return request('/api/xxServiceApi');
}
三、其他处调用ajax请求
1、原生或者jquery工具类
2、调用service方法
如上述service如何使用
import { queryCurrent } from '@/services/xxServiceApi'; export function getXXData() {
let userService = queryCurrent().then(p => {
console.log('data',p)
}
}
因为默认request同,dva的fetch一样返回的都是promise
这个可以直接使用then处理即可
004-ant design -dispatch、request、fetch的更多相关文章
- Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
Ant Design 表单中getFieldDecorator.getFieldValue.setFieldValue用法 一.getFieldDecorator getFieldDecorator是 ...
- Struts2中的session、request、respsonse获取方法
个人对于struts有一种复杂的心情,平心而论,struts2是个人最早接触到的的框架,在学校的时候就已经开始学习了,大四毕业设计,无疑用的还是struct,那时候SSH还是很流行的,后来出来实习,直 ...
- jsp 的四个作用域 :page、request、session和application的区别 (转)
1.简单说 page指当前页面.在一个jsp页面里有效 2.request 指从http请求到服务器处理结束,返回响应的整个过程.在这个过程中使用forward方式跳转多个jsp.在这些页面里你都可以 ...
- jsp的四个作用域page、request、session、application
1.简单说 page指当前页面.在一个jsp页面里有效 2.request 指从http请求到服务器处理结束,返回响应的整个过程.在这个过程中使用forward方式跳转多个jsp.在这些页面里你都可以 ...
- page、request、session和application有什么区别?
转自:http://liuyuru.iteye.com/blog/773367 1.简单说 page指当前页面.在一个jsp页面里有效 2.request 指从http请求到服务器处理结束,返回响应的 ...
- Jsp四个作用域page、request、session和application的区别
1.简单说 page指当前页面.在一个jsp页面里有效 2.request 指从http请求到服务器处理结束,返回响应的整个过程.在这个过程中使用forward方式跳转多个jsp.在这些页面里你都可 ...
- 在SpringMVC中操作Session、Request、Response对象
示例 @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper user ...
- FreeMarker 获取页面appplication、request、session
使用Request里的Attribute值最简单的方法就是直接${AttributeName}或者安全一点:${AttributeName!"default Value"} 1.取 ...
- javaWeb中 servlet 、request 、response
1.Servlet (1)Servlet是JavaEE的一个动态web资源开发技 术,就是在服务器上运行的小程序,这个小程序是由服务器调用的,服务器为了能调用这个小程序,就要求这样的程序必须实现一个S ...
- Response、Request、QueryString,repeater添加,修改,删除数据
内置对象: Response对象:响应请求,Response对象用于动态响应客户端请示,控制发送给用户的信息,并将动态生成响应.Response.Write("<script>a ...
随机推荐
- 【Deep learning】NLP
http://www.tuicool.com/articles/EvaQJnJ http://cs224d.stanford.edu/syllabus.html
- Hadoop参数汇总
linux参数 以下参数最好优化一下: 文件描述符ulimit -n 用户最大进程 nproc (hbase需要 hbse book) 关闭swap分区 设置合理的预读取缓冲区 Linux的内核的IO ...
- 使用tensorflow深度学习识别验证码
除了传统的PIL包处理图片,然后用pytessert+OCR识别意外,还可以使用tessorflow训练来识别验证码. 此篇代码大部分是转载的,只改了很少地方. 代码是运行在linux环境,tesso ...
- HDU 2594 Simpsons’ Hidden Talents (KMP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2594 这题直接用KMP算法就能够做出来,只是我还尝试了用扩展的kmp,这题用扩展的KMP效率没那么高. ...
- Ext3.4-EXT之嵌套表格的实现
其中使用到的"RowExpander.js"为extjs官方示例中自带的. 实现这个嵌套表格要注意两点技巧: 1 提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节 ...
- 【RF库Collections测试】Get From Dictionary
Name:Get From DictionarySource:Collections <test library>Arguments:[ dictionary | key ]Returns ...
- 安装DatabaseLibrary
Using pip pip install robotframework-databaselibrary From Source Download source from https://github ...
- file.wirtelines()方法【python】
转自:http://www.jb51.net/article/66643.htm
- nodeJS基础---->nodeJS的使用(一)
Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例 ...
- CentOS7安装Openvswitch 2.3.1 LTS
CentOS7安装Openvswitch 2.3.0 LTS,centos7openvswitch 一.环境: 宿主机:windows 8.1 update 3 虚拟机:vmware 11 虚拟机操作 ...