dva的基本用法
dva是一个状态管理工具,整合了redux,redux-saga,react-router,fetch等框架,目前只能用于react的状态管理
1. dva的models
dva的主要作用还是整合了redux,redux-saga的多文件的分散的写法,将state,reducers,effects这些常用的状态
处理方法集中在一个model中,其形式如下:
import * as userService from '../services/userService' export default {
namespace: "users",
state: {
list:[]
},
reducers: {
save(state, {payload:{data}}) {
state.list = data;
return {...state}
},
removeItem(state, {item}) {
state.list = state.list.filter(function (lItem) {
return item.id !== lItem.id
});
return{...state}
}
},
//effects指的是涉及到异步请求的方法。通常用来调用服务获取数据。
//这里要注意如果effects的方法名与reducers中存在重复的话容易造成死循环。
effects: {
* fetch(payload,{put, call}) {
const data = yield call(userService.fatchData);
yield put({type: "save", payload: data})
},
* fetchRemoveItem({item},{put,call}){
const result = yield call(userService.fetchRemoveItem,item.id);
if (result){
console.log(true);
yield put({type:"removeItem",item})
}else{
console.log(false);
}
}
},
subscriptions: {
setup({dispatch}) {
dispatch({type: 'fetch'})
}
}
}
要在全局的app中注册model
app.model(require('./models/users').default);
2. dva的models的几点说明
namespace: 全局状态的属性,通过global.namespace来访问对应model的state
reducers: 同步修改状态的方法
effects: 异步修改状态的方法,effects中使用的还是generator,与redux-saga中的调用完全一致,
不能直接调用reducers中的同步方法,通过put({'reducer方法名',payload})的形式来
调用reducer中的方法
subscriptions: subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。
在 app.start() 时被执行,数据源可以是当前的时间、服务器的websocket 连接、
keyboard 输入、geolocation 变化、history 路由变化等等
这个结构与vuex的结构十分类似
state -> reducers -> effects 对应 state -> mutations -> actions
3. dva中的状态传递
依然采用react-redux的方法,用connect,mapStateToProps来解决
4. dva中的全局事件
dva中提供了一下全局的事件,来解决注册和拦截问题
const app = dva({
history,
initialState,
onError,
onAction,
onStateChange,
onReducer,
onEffect,
onHmr,
extraReducers,
extraEnhancers,
});
onError: effect 执行错误或 subscription 通过 done 主动抛错时触发,可用于管理全局出错状态
onAction: 在 action 被 dispatch 时触发,用于注册 redux 中间件
onStateChange: state 改变时触发,可用于同步 state 到 localStorage,服务器端等
onReducer: 封装 reducer 执行,全局拦截reducer
onEffect: 封装 effect 执行,全局拦截effect
onHmr: 全局处理热替换
extraReducers: 指定额外的 reducer
extraEnhancers: 指定额外的 StoreEnhancer
参考:http://www.cnblogs.com/axel10/archive/2018/03/12/8548305.html
dva的基本用法的更多相关文章
- 【dva】dva的基本用法
services 该文件夹用于存储services,里面的内容为接口调用函数,记得将数据返回.(request是我自己封装函数,也可以用axios原生的函数) const finishTask = { ...
- dva.js 用法总结
dva.js是阿里前端团队开发的一个基于react.redux.webpack的一个前端框架,他能够实现react-redux-webpack环境一键部署,能帮前端工程师节省不少环境搭建的时间.而且经 ...
- 使用dvajs+webpack构建react开发环境
之前我有写过博文介绍过dva.js及其用法,dva.js固然是个非常优秀的框架,但是如果用dev-cli来创建的话就会默认绑定使用roadhog而不是webpack.鉴于roadhog的文档要明显少于 ...
- Ant Design Pro V5 从服务器请求菜单(typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro(下文简写antd pro)这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro ...
- dva.js 用法详解:列表展示
本教程案例github:https://github.com/axel10/dva_demo-Counter-and-list/tree/master 这次主要通过在线获取用户数据并且渲染成列表这个案 ...
- dva基本用法
1. npm install -g dva-cli 全局安装dva.2. dva new myApp --demo 创建dva项目.3. cd myApp npm start 启动项目.4. 定义 m ...
- dva.js 上手
来源:https://pengtikui.cn/dva.js-get-started/ ——------------------------------------------------------ ...
- react+dva+antd项目构建
一:版本升级 首先说明一下这里的dva是最新版: 2.3.2 1.初始化项目构建 npm install dva-cli -g dva -v dva-cli version 注:通过 npm 安装 d ...
- React 项目引入 Dva
背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...
随机推荐
- Qt on Android 蓝牙通信开发
版权声明:本文为MULTIBEANS ORG研发跟随文章,未经MLT ORG允许不得转载. 最近做项目,需要开发安卓应用,实现串口的收发,目测CH340G在安卓手机上非常麻烦,而且驱动都是Java版本 ...
- pyecharts数据分析及展示
仅仅从网上爬下数据当然是不够用的,主要还得对数据进行分析与展示,大部分人都看重薪资,但是薪资数据有的是*k/月,有的是*万/月,还有*万/年等等,就要对数据进行清理 将所有单位统一化,全部换算成统一单 ...
- python数据类型及其特有方法
一.运算符 in方法 "hello" in "abcdefghijklmnopqrstuvwxyz" "li" in ["gg&q ...
- 阿里云异常网络连接-可疑WebShell通信行为的分析解决办法
2018年10月27日接到新客户网站服务器被上传了webshell脚本木马后门问题的求助,对此我们sine安全公司针对此阿里云提示的安全问题进行了详细分析,ECS服务器被阿里云提示异常网络连接-可疑W ...
- Mult
public class MULT { public static void main(String args[]) { int k; for(int x=1;x<=9;x++) { for(i ...
- POJ1985 树的直径(BFS
Cow Marathon Description After hearing about the epidemic of obesity in the USA, Farmer John wants ...
- matlab-罗曼诺夫斯基准则剔除粗大值
罗曼诺夫斯基准则原理 罗曼诺夫斯基准则又称 t检验准则,其特点是首先删除一个可疑的的测得值,然后按 t分布检验被剔除的测量值是否含有粗大误差 罗曼诺夫斯基准则 1)选取合适的显著度a,选择合适的数 ...
- C语言运算符优先级和结合性
运算符优先级和结合性 优先级 运算符 结合性 ...
- vue 项目如何使用微信分享接口
首先做微信网页都要接入微信sdk: 安装sdk npm install weixin-js-sdk --save 具体可以查看微信公众平台技术文档:https://mp.weixin.qq.com/w ...
- 用mapreduce读取hdfs数据到hbase上
hdfs数据到hbase过程 将HDFS上的文件中的数据导入到hbase中 实现上面的需求也有两种办法,一种是自定义mr,一种是使用hbase提供好的import工具 hbase先创建好表 cre ...