概念

// http://localhost:3000/

//models
import IndexPage from './routes/IndexPage';
import Products from './routes/Products'; //Router Component
function RouterConfig({ history }) {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/products" exact component={Products} />
</Switch>
</Router>
);
} //Router Component dispatch
const Products = ({ dispatch, products }) => {
function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={handleDelete} products={products} />
</div>
);
};
connect(({ products }) => ({
products,
}))(Products); //models
export default {
namespace: 'products',
state: [],
reducers: {
'delete'(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
}; //通过dva实现整个流程
const app = dva({
initialState: {
products: [
{ name: 'dva', id: 1 },
{ name: 'antd', id: 2 },
],
},
}); // 2. Plugins
//app.use({}); // 3. Model
app.model(require('./models/products').default); // 4. Router
app.router(require('./router').default); // 5. Start
app.start('#root');

dva最简结构

umi 和 dva、roadhog 是什么关系?

简单来说,

roadhog 是基于 webpack 的封装工具,目的是简化 webpack 的配置
umi 可以简单地理解为 roadhog + 路由,思路类似 next.js/nuxt.js,辅以一套插件机制,目的是通过框架的方式简化 React 开发
dva 目前是纯粹的数据流,和 umi 以及 roadhog 之间并没有相互的依赖关系,可以分开使用也可以一起使用,个人觉得 umi + dva 是比较搭的
// 创建应用
const app = dva(); // 注册 Model
app.model({
namespace: 'count',
state: 0,
reducers: {
add(state) { return state + 1 },
},
effects: {
*addAfter1Second(action, { call, put }) {
yield call(delay, 1000);
yield put({ type: 'add' });
},
},
}); // 注册视图
app.router(() => <ConnectedApp />); // 启动应用
app.start('#root');

Umi 与 Dva


├── app.js //配置dva
├── assets
│ └── yay.jpg
├── global.css
├── layouts
│ ├── __tests__
│ │ └── index.test.js
│ ├── index.css
│ └── index.js
└── pages //页面即路由
├── $post
│ ├── comments.js
│ └── index.js
├── 404.js
├── __tests__
│ └── index.test.js
├── document.ejs
├── index.css
├── index.js
├── products // /products
│ ├── index.js //接收products
│ └── model.js //配置 /products的路由
└── users
└── $id$.js //products/index.js 派发action
const ProductList = ({ onDelete, products }) => {
const columns = [{
title: 'Name',
dataIndex: 'name',
}, {
title: 'Actions',
render: (text, record) => {
return (
<Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
<Button>Delete</Button>
</Popconfirm>
);
},
}];
return (
<Table
dataSource={products}
columns={columns}
rowKey={record => record.id}
/>
);
}; //接收initialState与dispatch
export default connect(({ products }) => ({
products
}),(dispatch) => {
return {
onDelete: function handleDelete(id) {
dispatch({
type: 'products/delete',
payload: id,
});
}
}
})(ProductList) //app.js配置dva
export const dva = {
config: {
onError(e) {
e.preventDefault();
console.error(e.message);
},
initialState: {
products: [
{ name: 'dva', id: 1 },
{ name: 'antd', id: 2 },
],
}
},
plugins: [
require('dva-logger')(),
],
};

react框架 Dva & Umi的更多相关文章

  1. React框架 dva 和 mobx 的使用感受

    最近在用react写web项目,领导为了让前端便于维护要求都用react作为开发基础,框架选型不限.在使用 react 的时候或多或少会接触到状态管理,从开始学 react 到现在也挺久了,做一些前端 ...

  2. react的dva框架初试

    使用背景:迫不得已!!(自己入职是以vue技术入职的,说是马上vue项目就来了,让我负责这个项目的前端.但是入职后就让我下了现在这个项目看下,然后就顺理成章的帮忙进行开发了,其实自己一直想要做reac ...

  3. dva + umi 学习笔记

    首先,这里的 dva + umi 不是说学习dva和umi,而是基于 dva + umi 的react前端开发脚手架,这是我的目标. 一开始,我在dva文档的例子里看到了 dva + umi 的例子. ...

  4. Dva & Umi

    Dva & Umi Dva.js & Umi.js React & Redux https://dvajs.com/ React and redux based, lightw ...

  5. 当react框架遇上百度地图

      百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...

  6. 谈谈出入React框架踩过的坑

    1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop valu ...

  7. React使用DVA本地state传值取值

    React使用DVA本地state传值取值 最近在用Ant Pro 做一个后台系统,在使用中发现Antd Pro使用DVA来实现redux+sagas+router一系列的功能,比传统方式要方便快捷的 ...

  8. 【react】当react框架遇上百度地图

      百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...

  9. D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序

    数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...

随机推荐

  1. css编写规范最佳实践

    最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...

  2. 老男孩Day12作业:RabbitMQ-RPC版主机管理程序

    一.作业需求 1.可以对指定机器异步的执行多个命令 例子: 请输入操作指令>>>:run ipconfig --host 127.0.0.0 in the call     tack ...

  3. ansible api2.0 多进程执行不同的playbook

    自动化运维工具:ansible 多进程调用ansible api的应用场景:   应用系统检查 一个应用系统可能具有20—50台服务器的集群,初步的系统层面检查可以用一个统一的playbook来检查, ...

  4. 【OpenCV3】直线拟合--FitLine()函数详解

    一.FitLine()函数原型 CV_EXPORTS_W void fitLine( InputArray points, // 待输入点集(一般为二维数组或vector点集) OutputArray ...

  5. js根据经纬度计算两点距离

    js版-胡老师 google.maps.LatLng.prototype.distanceFrom = function(latlng) {    var lat = [this.lat(), lat ...

  6. ThreadLocal系列(三)-TransmittableThreadLocal的使用及原理解析

    ThreadLocal系列(三)-TransmittableThreadLocal的使用及原理解析 上一篇:ThreadLocal系列(二)-InheritableThreadLocal的使用及原理解 ...

  7. 使用二叉搜索树实现一个简单的Map

    之前看了刘新宇大大的<算法新解>有了点收获,闲来无事,便写了一个二叉搜索树实现的Map类. java的Map接口有很多不想要的方法,自己定义了一个 public interface IMa ...

  8. 【Maven学习】maven-assembly-plugin的使用

    转自http://liugang594.iteye.com/blog/2093607 maven-assembly-plugin使用描述(拷自 maven-assembly-plugin 主页) Th ...

  9. Window.localStorage

    博客园 https://www.cnblogs.com/st-leslie/p/5617130.html 参考文档 https://developer.mozilla.org/zh-CN/docs/W ...

  10. Ubuntu14.04下Ambari安装搭建部署大数据集群(图文分五大步详解)(博主强烈推荐)

    不多说,直接上干货! 写在前面的话 (1) 最近一段时间,因担任我团队实验室的大数据环境集群真实物理机器工作,至此,本人秉持负责.认真和细心的态度,先分别在虚拟机上模拟搭建ambari(基于CentO ...