【dva】dva的基本用法
services
该文件夹用于存储services,里面的内容为接口调用函数,记得将数据返回.(request是我自己封装函数,也可以用axios原生的函数)
const finishTask = {
query: (params) =>
request({ url: '/app/data, method: 'POST', data: params })
};
export{
finishTask
}
models
该文件夹为dva的核心之一,这个文件夹里主要是存储数据、处理数据等关键功能的地方.他的写法如下
export default {
namespace: "base", //model的名称,必须是唯一的标记
state: { //数据
list:[]
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {//当history发生变化时就会进入到此函数
//可以在此函数中根据pathname的变化去dispatch
});
},
},
effects: {
*getData({ payload = {} }, { select, call, put }) {
const data = yield call(query,payload); //query就是services里面的函数,需要从services里面import
const list = yield select((state) => state.base.list); //从本model里面获取state里面的list
yield put({
type: 'save', payload: {
list:data
} });//通过reducers去修改本model里面的数据
}
},
reducers: {
save(state, action) {
return { ...state, ...action.payload };//必须返回一个新的action
}
}
};
view
接下来讲如何在view端,即页面或者组件中去使用models里面的函数和数据
import { useSelector, useDispatch } from 'dva';
1.useSelector
这个函数的作用是拿到models里面的state
const {list}= useSelector((state) => state.base);
2.useDispatch
这个函数会返回你一个dispatch函数,
const dispatch = useDispatch();
拿到这个函数之后你可以通知models里面的effect对应的函数执行
dispatch({
type: 'base/getData', //必须传一个type告诉dva你要执行哪个model里面的那个effect
payload: {
id:1 //写上你要传的参数
},
});
只要你发起了dispatch,effect便会执行services里面的函数去调接口,然后再根据effect里面写的逻辑去处理数据,接着通过reducers里面的函数返回一个新的action去通知view有更新.view拿到新的action之后便会重新渲染,这个时候useSelector会重新执行一遍拿到新的state.整个流程便完成了.
【dva】dva的基本用法的更多相关文章
- React dva 的使用
各大传送门: DvaJS Github DvaJS API与示例 了解 dva- dva = React-Router + Redux + Redux-saga + fetch - dva的初衷是(其 ...
- Vuex、Flux、Redux、Redux-saga、Dva、MobX
https://www.jqhtml.com/23003.html 这篇文章试着聊明白这一堆看起来挺复杂的东西.在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 Reac ...
- 前端笔记之React(七)redux-saga&Dva&路由
一.redux-saga解决异步 redux-thunk 和 redux-saga 使用redux它们是必选的,二选一,它们两个都可以很好的实现一些复杂情况下redux,本质都是为了解决异步actio ...
- Dva框架从初识到上手
引言 最近工作需要用dva框架,同事帮我培训了一下,有一点点认识,在此总结. 当然,以后对dva可能会了解更透彻,文章会不断更新的. 初识 开始看架构代码,没有看文档的时候,不知道里面的几个关键字 ...
- react+dva+antd+umi项目建立操作流程及知识点总结
0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are the ...
- 用Taro写一个微信小程序(三)—— 配置dva
一.关于dva dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻 ...
- redux和dva
实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容 这两天看了公司的alit ...
- dva.js 用法总结
dva.js是阿里前端团队开发的一个基于react.redux.webpack的一个前端框架,他能够实现react-redux-webpack环境一键部署,能帮前端工程师节省不少环境搭建的时间.而且经 ...
- dva.js 用法详解:列表展示
本教程案例github:https://github.com/axel10/dva_demo-Counter-and-list/tree/master 这次主要通过在线获取用户数据并且渲染成列表这个案 ...
- dva的基本用法
dva是一个状态管理工具,整合了redux,redux-saga,react-router,fetch等框架,目前只能用于react的状态管理 1. dva的models dva的主要作用还是整合了r ...
随机推荐
- vue+node+mongondb实战之路由
看了一段时间vue的文档,一直没有机会来开发一个真正的vue项目,趁着这几天清闲,整合一下最新的技术,变学变练来开发一个vue的简单博客 有了开发博客的想法之后,谁知道第一步就被拦住了,看了vue的基 ...
- Spring Cloud Gateway自定义过滤器实战(观测断路器状态变化)
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 深度揭秘Netty中的FastThreadLocal为什么比ThreadLocal效率更高?
阅读这篇文章之前,建议先阅读和这篇文章关联的内容. 1. 详细剖析分布式微服务架构下网络通信的底层实现原理(图解) 2. (年薪60W的技巧)工作了5年,你真的理解Netty以及为什么要用吗?(深度干 ...
- C/C++ Qt ToolBar 菜单组件应用
ToolBar工具栏在所有窗体应用程序中都广泛被使用,使用ToolBar可以很好的规范菜单功能分类,用户可根据菜单栏来选择不同的功能,Qt中默认自带ToolBar组件,当我们以默认方式创建窗体时,To ...
- 关于PHP的==运算符比较规则
==是比较运算,它不会去检查比较的具体类型是否相等,只是单纯的根据php内置的转换规则来比较 ===是全等运算,相对来说它的要求更为严格,比较过程不会进行类型转换,从类型到内容都要求相等 ===运算符 ...
- 计算机网络 | 从 ChanelOption 到 Netty 底层
概述 ChannelOption 是 Netty 中在构建引导类时可以填写的构建 Channel 的选项 其可以分为两部分,一部分为控制 Netty 自身底层运行的选项:另一部分则是操作系统创建 so ...
- Haywire
还是模拟退火乱搞. 不过考虑记录一下在整个退火过程中的最优答案. 而不是只看最后剩下的解. 退火是一个随机算法,他有很大的几率能跳到最优解,但也很有可能从最优解跳出去. 所以要记录答案. Haywir ...
- Atcoder Regular Contest 096 D - Sweet Alchemy(贪心+多重背包)
洛谷题面传送门 & Atcoder 题面传送门 由于再过 1h 就是 NOI 笔试了所以题解写得会略有点简略. 考虑差分,记 \(b_i=c_i-c_{fa_i}\),那么根据题意有 \(b_ ...
- Codeforces 997D - Cycles in product(换根 dp)
Codeforces 题面传送门 & 洛谷题面传送门 一种换根 dp 的做法. 首先碰到这类题目,我们很明显不能真的把图 \(G\) 建出来,因此我们需要观察一下图 \(G\) 有哪些性质.很 ...
- Discontinuous Galerkin method for steady transport problem
下面讨论如何使用 Discontinuous Galerkin 求解恒定对流问题. 1.简介 恒定状态对流方程 \[\begin{equation} a\cdot \nabla \mathbf{u} ...