【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 ...
随机推荐
- Python 全局变量和局部变量,global 和 nonlocal关键字
全局变量和局部变量 全局变量:定义在函数外的变量 局部变量:定义在函数内部变量 获取变量值时候先获取当前作用域变量名称和变量值,如果没找到到上一层作用域招变量的值,在没有就报错,先获 ...
- 【linux系统】jmeter安装
安装步骤: 1.下载jmeter安装包 wget https://dlcdn.apache.org//jmeter/binaries/apache-jmeter-5.4.1.tgz 如报错以下,需使 ...
- [Aizu1410]Draw in Straight Lines
注意到当操作确定后,显然操作顺序总是涂黑色的1操作->涂白色的1操作->2操作 用$b/w_{r/c}(i,j)$表示$(i,j)$是否被黑色/白色 横着/竖着 涂过(1表示涂过,0表示没 ...
- [atARC105D]Let's Play Nim
先对$n$分奇偶两种情况考虑-- $n$为奇数,显然先手希望最终产生的$x_{1}\oplus x_{2}\oplus...\oplus x_{n}=0$ 对于后手,考虑构造:将最大的未被选择的$a_ ...
- 1、使用ValueOperations操作redis(String字符串)
文章来源:https://www.cnblogs.com/shiguotao-com/p/10559997.html 方法 c参数 s说明 void set(K key, V value); ke ...
- SpringSecurity 小demo
SpringSecurity 首先搭建好springboot工程,然后引入springsecurity依赖. <dependency> <groupId>org.springf ...
- R语言与医学统计图形-【27】ggplot2图形组合、字体、保存
ggplot2绘图系统--图形组合.字体选择.保存输出 1.图形组合 一页多图在基础包中利用par和layout函数来切分画布. ggplot2是先铺好网格背景,再进行绘图,所以要通过切分网格背景来实 ...
- python 新闻管理系统——启示
mysql取整函数: mysql函数ceil.floor.round mysql 取整 1.ceil() / ceiling() 向上取整 ex: ceil(1.2) = 2 2.floor() 向下 ...
- mac 下 如何在同一窗口打开多个终端并实现快捷键切换
相信大家编代码的时候都会遇到,每次需要在头文件,库文件和源码文件中编代码的时候,总是需要在几个文件中切换来切换去的,而且一个文件就一个终端窗口,每次都要用鼠标点来点去,非常麻烦,所以如果能把这几个文件 ...
- 数据库(database)介绍
0.数据定义:除了文本类型的数据,图像.音乐.声音都是数据. 数据分类:结构化数据.非结构化数据.1.数据库定义:"电子化的文件柜","数据仓库".数据库是一个 ...