react框架 Dva & Umi
概念
// 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的更多相关文章
- React框架 dva 和 mobx 的使用感受
最近在用react写web项目,领导为了让前端便于维护要求都用react作为开发基础,框架选型不限.在使用 react 的时候或多或少会接触到状态管理,从开始学 react 到现在也挺久了,做一些前端 ...
- react的dva框架初试
使用背景:迫不得已!!(自己入职是以vue技术入职的,说是马上vue项目就来了,让我负责这个项目的前端.但是入职后就让我下了现在这个项目看下,然后就顺理成章的帮忙进行开发了,其实自己一直想要做reac ...
- dva + umi 学习笔记
首先,这里的 dva + umi 不是说学习dva和umi,而是基于 dva + umi 的react前端开发脚手架,这是我的目标. 一开始,我在dva文档的例子里看到了 dva + umi 的例子. ...
- Dva & Umi
Dva & Umi Dva.js & Umi.js React & Redux https://dvajs.com/ React and redux based, lightw ...
- 当react框架遇上百度地图
百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...
- 谈谈出入React框架踩过的坑
1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop valu ...
- React使用DVA本地state传值取值
React使用DVA本地state传值取值 最近在用Ant Pro 做一个后台系统,在使用中发现Antd Pro使用DVA来实现redux+sagas+router一系列的功能,比传统方式要方便快捷的 ...
- 【react】当react框架遇上百度地图
百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...
- D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序
数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...
随机推荐
- css编写规范最佳实践
最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...
- 老男孩Day12作业:RabbitMQ-RPC版主机管理程序
一.作业需求 1.可以对指定机器异步的执行多个命令 例子: 请输入操作指令>>>:run ipconfig --host 127.0.0.0 in the call tack ...
- ansible api2.0 多进程执行不同的playbook
自动化运维工具:ansible 多进程调用ansible api的应用场景: 应用系统检查 一个应用系统可能具有20—50台服务器的集群,初步的系统层面检查可以用一个统一的playbook来检查, ...
- 【OpenCV3】直线拟合--FitLine()函数详解
一.FitLine()函数原型 CV_EXPORTS_W void fitLine( InputArray points, // 待输入点集(一般为二维数组或vector点集) OutputArray ...
- js根据经纬度计算两点距离
js版-胡老师 google.maps.LatLng.prototype.distanceFrom = function(latlng) { var lat = [this.lat(), lat ...
- ThreadLocal系列(三)-TransmittableThreadLocal的使用及原理解析
ThreadLocal系列(三)-TransmittableThreadLocal的使用及原理解析 上一篇:ThreadLocal系列(二)-InheritableThreadLocal的使用及原理解 ...
- 使用二叉搜索树实现一个简单的Map
之前看了刘新宇大大的<算法新解>有了点收获,闲来无事,便写了一个二叉搜索树实现的Map类. java的Map接口有很多不想要的方法,自己定义了一个 public interface IMa ...
- 【Maven学习】maven-assembly-plugin的使用
转自http://liugang594.iteye.com/blog/2093607 maven-assembly-plugin使用描述(拷自 maven-assembly-plugin 主页) Th ...
- Window.localStorage
博客园 https://www.cnblogs.com/st-leslie/p/5617130.html 参考文档 https://developer.mozilla.org/zh-CN/docs/W ...
- Ubuntu14.04下Ambari安装搭建部署大数据集群(图文分五大步详解)(博主强烈推荐)
不多说,直接上干货! 写在前面的话 (1) 最近一段时间,因担任我团队实验室的大数据环境集群真实物理机器工作,至此,本人秉持负责.认真和细心的态度,先分别在虚拟机上模拟搭建ambari(基于CentO ...