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. [at4631]Jewels

    如果要选某颜色,必然会选该颜色最大的两个,那么不妨将这两个宝石权值修改为两者的平均数,显然不影响两者的和,也即不影响答案 接下来,将所有宝石按权值从大到小排序,并在权值相同时按颜色编号从小到大(使颜色 ...

  2. Dubbo的反序列化安全问题——kryo和fst

    目录 0 前言 1 Dubbo的协议设计 2 Dubbo中的kryo序列化协议触发点 3 Dubbo中的fst序列化协议触发点 3.1 fst复现 3. 2 思路梳理 4 总结 0 前言 本篇是Dub ...

  3. 【IDEA】IntelliJ IDEA 2020.1破解版

    IntelliJ IDEA 2020.1破解版 2020-09-09  14:58:56  by冲冲 安装链接: 1. 百度网盘下载地址链接:https://pan.baidu.com/s/1cxjz ...

  4. idea给类增加注释

    File-->Settings-->Editor-->File and Code Templates 找到class #if (${PACKAGE_NAME} && ...

  5. Rainbond通过插件整合SkyWalking,实现APM即插即用

    作者:张震 一. 简介 SkyWalking 是一个开源可观察性平台,用于收集.分析.聚合和可视化来自服务和云原生基础设施的数据.支持分布式追踪.性能指标分析.应用和服务依赖分析等:它是一种现代 AP ...

  6. 我的获奖记录及 Important Dates in OI

    逊逊的获奖记录/ruo(真的没拿过啥奖,并且大部分都集中在初三阶段,即 2020-2021 赛季): NOIP2018 pj,1=,无游记 CSP-S2019,1=,无游记 APIO2020,Ag,游 ...

  7. Codeforces 1476G - Minimum Difference(带修莫队+根号平衡)

    Codeforces 题目传送门 & 洛谷题目传送门 震惊!我竟然独立切掉了这道 *3100 的题! 虽然此题难度的确虚高,感觉真实评分也就 2800~2900 罢.但感觉还是挺有成就感的( ...

  8. Atcoder Grand Contest 021 F - Trinity(dp+NTT)

    Atcoder 题面传送门 & 洛谷题面传送门 首先我们考虑设 \(dp_{i,j}\) 表示对于一个 \(i\times j\) 的网格,其每行都至少有一个黑格的合法的三元组 \((A,B, ...

  9. 【Python小试】去除核酸特定长度的接头序列

    输入 input.txt ATTCGATTATAAGCTCGATCGATCGATCGATCGATCGATCGATCGATCGATCGATC ATTCGATTATAAGCACTGATCGATCGATCG ...

  10. 嵌入式Linux利用ppp实现4G模块联网

    https://blog.csdn.net/qq361294382/article/details/52136126 https://blog.csdn.net/qq361294382/article ...