React+Dva
Reducer
reducer 是一个函数,接受 state 和 action,返回老的或新的 state 。即:(state, action) => state
Effect
app.model({
namespace: 'todos',
effects: {
*addRemote({ payload: todo }, { put, call }) {
yield call(addTodo, todo);
yield put({ type: 'add', payload: todo });
},
},
});
Effects
put:用于触发 action 。 yield put({ type: 'todos/add', payload: 'Learn Dva' })
call:用于调用异步逻辑,支持 promise 。 const result = yield call(fetch, '/todos');
select:用于从 state 里获取数据。 const todos = yield select(state => state.todos);
错误处理
全局错误处理
dva 里,effects 和 subscriptions 的抛错全部会走 onError
hook,所以可以在 onError
里统一处理错误。
const app = dva({
onError(e, dispatch) {
console.log(e.message);
},
})
本地错误处理
如果需要对某些 effects 的错误进行特殊处理,需要在 effect 内部加 try catch
异步请求
GET 和 POST
import request from '../util/request';
// GET
request('/api/todos');
// POST
request('/api/todos', {
method: 'POST',
body: JSON.stringify({ a: 1 }),
});
Subscription
subscriptions
是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。
subscriptions: {
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
if (pathname === '/users') {
dispatch({
type: 'users/fetch',
});
}
});
},
},
Router
<Route path="/" component={App}>
<Route path="statements" component={Statements}/>
</Route>
基于 action 进行页面跳转
import { routerRedux } from 'dva/router'; // Inside Effects
yield put(routerRedux.push('/logout')); // Outside Effects
dispatch(routerRedux.push('/logout')); // With query
routerRedux.push({
pathname: '/logout',
query: {
page: 2,
},
});
React+Dva的更多相关文章
- react+dva 全局model中异步获取数据state在组件中取不到值
先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...
- React & Dva & Actions & dispatch & effects
React & Dva & Actions & dispatch & effects dispatch https://dvajs.com/guide/introduc ...
- React dva 的使用
各大传送门: DvaJS Github DvaJS API与示例 了解 dva- dva = React-Router + Redux + Redux-saga + fetch - dva的初衷是(其 ...
- React + Dva + Antd + Umi 概况
Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...
- react dva 表单校验
import React,{ Component } from 'react'; import { connect } from 'dva'; import { WhiteSpace,NavBar , ...
- 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 ...
- React+dva+webpack+antd-mobile 实战分享(一)
再看本篇文章之前,本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目,因为现在dva和roadhog还不成熟,坑相对要多一些,当然如果你已经做好跳坑的准备 ...
- React+dva+webpack+antd-mobile 实战分享(二)
第一篇 https://segmentfault.com/a/11... 在上一篇文章中教给大家了怎么搭建项目的架子:那么今天我们就来说一下项目里的导航和列表的实现 导航 废话不说啦 下面直接给大家讲 ...
- react+dva+antd项目构建
一:版本升级 首先说明一下这里的dva是最新版: 2.3.2 1.初始化项目构建 npm install dva-cli -g dva -v dva-cli version 注:通过 npm 安装 d ...
- react + dva + ant架构后台管理系统(一)
一.什么是dva dva是蚂蚁金服推出的一个单页应用框架,对 redux, react-router, redux-saga进行了上层封装,没有引入新的概念,但是极大的程度上提升了开发效率: 二.安装 ...
随机推荐
- 一次vue-cli 2.x项目打包优化经历(优化xlsx插件)
一.分析各模块打包后大小 用vue-cli创建的项目,已经集成 webpack-bundle-analyzer.详见文件 build/webpack.prod.conf.js,代码如下: if (co ...
- 8.3 操作MongoDB数据库
一项权威调查显示,在大数据时代软件开发人员必备的十项技能中MongoDB数据库名列第二,仅次于HTML5.MongoDB是一个基于分布式文件存储的文档数据库,可以说是非关系型(Not Only SQL ...
- AIM Tech Round (Div. 2)——ABCD
http://codeforces.com/contest/624 A.python是用来写div2的AB题的... a, b, x, y = map(float, raw_input().split ...
- ubuntu 14.04 gcc/g++版本降低
Matlab 2014a支持的gcc/g++版本是4.7x,而ubuntu 14.04以及更高版本默认安装的版本都是4.8及以上,因此需要降低gcc/g++版本,方法如下: 1 安装 $ sudo a ...
- hdu 4975 最大流解决行列和求矩阵问题,用到矩阵dp优化
//刚开始乱搞. //网络流求解,如果最大流=所有元素的和则有解:利用残留网络判断是否唯一, //方法有两种,第一种是深搜看看是否存在正边权的环,见上一篇4888 //至少四个点构成的环,第二种是用矩 ...
- toj 1421
题意:假如存在矩阵A,A[i][0] + A[i][1] + ...... + A[i][n - 1] == SR[i],A[0][j] + A[1][j] + ...... + A[n - 1][j ...
- POJ 2947-Widget Factory(高斯消元解同余方程式)
题目地址:id=2947">POJ 2947 题意:N种物品.M条记录,接写来M行,每行有K.Start,End,表述从星期Start到星期End,做了K件物品.接下来的K个数为物品的 ...
- Android实战简易教程-第十五枪(实现ListView中Button点击事件监听)
1.main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...
- Hadop使用Partitioner后,结果还是一个文件,怎样解决??
近期看了一下partitioner.于是照着写了一个列子.最后发现程序并没有将结果分开写入对应的文件,结果还是一个文件,于是乎感觉是不是没实用集群去执行程序,发现control中还是本地执行的代码: ...
- mysql数据类型和Java数据类型对比一览
MySQL Types to Java Types for ResultSet.getObject() MySQL Type Name Return value ofGetColumnClassNam ...