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的基本用法的更多相关文章

  1. React dva 的使用

    各大传送门: DvaJS Github DvaJS API与示例 了解 dva- dva = React-Router + Redux + Redux-saga + fetch - dva的初衷是(其 ...

  2. Vuex、Flux、Redux、Redux-saga、Dva、MobX

    https://www.jqhtml.com/23003.html 这篇文章试着聊明白这一堆看起来挺复杂的东西.在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 Reac ...

  3. 前端笔记之React(七)redux-saga&Dva&路由

    一.redux-saga解决异步 redux-thunk 和 redux-saga 使用redux它们是必选的,二选一,它们两个都可以很好的实现一些复杂情况下redux,本质都是为了解决异步actio ...

  4. Dva框架从初识到上手

    引言 最近工作需要用dva框架,同事帮我培训了一下,有一点点认识,在此总结. 当然,以后对dva可能会了解更透彻,文章会不断更新的.   初识 开始看架构代码,没有看文档的时候,不知道里面的几个关键字 ...

  5. 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 ...

  6. 用Taro写一个微信小程序(三)—— 配置dva

    一.关于dva dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻 ...

  7. redux和dva

    实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容 这两天看了公司的alit ...

  8. dva.js 用法总结

    dva.js是阿里前端团队开发的一个基于react.redux.webpack的一个前端框架,他能够实现react-redux-webpack环境一键部署,能帮前端工程师节省不少环境搭建的时间.而且经 ...

  9. dva.js 用法详解:列表展示

    本教程案例github:https://github.com/axel10/dva_demo-Counter-and-list/tree/master 这次主要通过在线获取用户数据并且渲染成列表这个案 ...

  10. dva的基本用法

    dva是一个状态管理工具,整合了redux,redux-saga,react-router,fetch等框架,目前只能用于react的状态管理 1. dva的models dva的主要作用还是整合了r ...

随机推荐

  1. Python 全局变量和局部变量,global 和 nonlocal关键字

    全局变量和局部变量    全局变量:定义在函数外的变量    局部变量:定义在函数内部变量    获取变量值时候先获取当前作用域变量名称和变量值,如果没找到到上一层作用域招变量的值,在没有就报错,先获 ...

  2. 【linux系统】jmeter安装

    安装步骤: 1.下载jmeter安装包  wget https://dlcdn.apache.org//jmeter/binaries/apache-jmeter-5.4.1.tgz 如报错以下,需使 ...

  3. [Aizu1410]Draw in Straight Lines

    注意到当操作确定后,显然操作顺序总是涂黑色的1操作->涂白色的1操作->2操作 用$b/w_{r/c}(i,j)$表示$(i,j)$是否被黑色/白色 横着/竖着 涂过(1表示涂过,0表示没 ...

  4. [atARC105D]Let's Play Nim

    先对$n$分奇偶两种情况考虑-- $n$为奇数,显然先手希望最终产生的$x_{1}\oplus x_{2}\oplus...\oplus x_{n}=0$ 对于后手,考虑构造:将最大的未被选择的$a_ ...

  5. 1、使用ValueOperations操作redis(String字符串)

    文章来源:https://www.cnblogs.com/shiguotao-com/p/10559997.html 方法 c参数 s说明   void set(K key, V value); ke ...

  6. SpringSecurity 小demo

    SpringSecurity 首先搭建好springboot工程,然后引入springsecurity依赖. <dependency> <groupId>org.springf ...

  7. R语言与医学统计图形-【27】ggplot2图形组合、字体、保存

    ggplot2绘图系统--图形组合.字体选择.保存输出 1.图形组合 一页多图在基础包中利用par和layout函数来切分画布. ggplot2是先铺好网格背景,再进行绘图,所以要通过切分网格背景来实 ...

  8. python 新闻管理系统——启示

    mysql取整函数: mysql函数ceil.floor.round mysql 取整 1.ceil() / ceiling() 向上取整 ex: ceil(1.2) = 2 2.floor() 向下 ...

  9. mac 下 如何在同一窗口打开多个终端并实现快捷键切换

    相信大家编代码的时候都会遇到,每次需要在头文件,库文件和源码文件中编代码的时候,总是需要在几个文件中切换来切换去的,而且一个文件就一个终端窗口,每次都要用鼠标点来点去,非常麻烦,所以如果能把这几个文件 ...

  10. 数据库(database)介绍

    0.数据定义:除了文本类型的数据,图像.音乐.声音都是数据. 数据分类:结构化数据.非结构化数据.1.数据库定义:"电子化的文件柜","数据仓库".数据库是一个 ...