长春做网站电话,成都十大景观设计公司,怎么搭建国外网络,值得买网站模板公司的项目源码用的是react和dva#xff0c;所以我必须抓紧时间学习一下dva了#xff0c;一天时间#xff0c;看看我学到了什么#xff08;dva官网DvaJS#xff09;[这是很久之前就打算写的了#xff0c;一直没时间#xff0c;一直存着草稿#xff0c;今天发出来吧]
1…公司的项目源码用的是react和dva所以我必须抓紧时间学习一下dva了一天时间看看我学到了什么dva官网DvaJS[这是很久之前就打算写的了一直没时间一直存着草稿今天发出来吧]
1.介绍
dva 首先是一个基于 redux 和 redux-saga 的数据流方案然后为了简化开发体验dva 还额外内置了 react-router 和 fetch所以也可以理解为一个轻量级的应用框架。【redux-saga】
2.安装 dva-cli
通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。
$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1
3. 创建新应用
dva new dva-quickstart
4. 通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载antd 的脚本和样式的
$ npm install antd babel-plugin-import --save编辑 .webpackrc使 babel-plugin-import 插件生效。
{extraBabelPlugins: [[import, { libraryName: antd, libraryDirectory: es, style: css }]]
}注dva-cli 基于 roadhog 实现 build 和 dev 5.定义路由
新建 route component routes/Products.js内容如下
import React from react;const Products (props) (h2List of Products/h2
);export default Products;添加路由信息到路由表编辑 router.js : import Products from ./routes/Products;
...Route path/products exact component{Products} /
npm start 启动服务
在浏览器里打开 http://localhost:8000/#/products 你应该能看到前面定义的 h2 标签
6. 编写 UI Component
随着应用的发展你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)在 dva 里你可以把这部分抽成 component 。
我们来编写一个 ProductList component这样就能在不同的地方显示产品列表了。
新建 components/ProductList.js 文件
import React from react;
import PropTypes from prop-types;
import { Table, Popconfirm, Button } from antd;const ProductList ({ onDelete, products }) {const columns [{title: Name,dataIndex: name,}, {title: Actions,render: (text, record) {return (Popconfirm titleDelete? onConfirm{() onDelete(record.id)}ButtonDelete/Button/Popconfirm);},}];return (TabledataSource{products}columns{columns}/);
};ProductList.propTypes {onDelete: PropTypes.func.isRequired,products: PropTypes.array.isRequired,
};export default ProductList;
7. 定义 Model
完成 UI 后现在开始处理数据和逻辑。
dva 通过 model 的概念把一个领域的模型管理起来包含同步更新 state 的 reducers处理异步逻辑的 effects订阅数据源的 subscriptions 。
新建 model models/products.js
export default {namespace: products,state: [],reducers: {delete(state, { payload: id }) {return state.filter(item item.id ! id);},},
}; 这个 model 里
namespace 表示在全局 state 上的 keystate 是初始值在这里是空数组reducers 等同于 redux 里的 reducer接收 action同步更新 state
然后别忘记在 index.js 里载入他
// 3. Modelapp.model(require(./models/products).default);
8. connect 起来
到这里我们已经单独完成了 model 和 component那么他们如何串联起来呢?
dva 提供了 connect 方法。如果你熟悉 redux这个 connect 就是 react-redux 的 connect 。
编辑 routes/Products.js替换为以下内容 import React from react;
import { connect } from dva;
import ProductList from ../components/ProductList;const Products ({ dispatch, products }) {function handleDelete(id) {dispatch({type: products/delete,payload: id,});}return (divh2List of Products/h2ProductList onDelete{handleDelete} products{products} //div);
};// export default Products;
export default connect(({ products }) ({products,
}))(Products);最后我们还需要一些初始数据让这个应用 run 起来。编辑 index.js
- const app dva();const app dva({initialState: {products: [{ name: dva, id: 1 },{ name: antd, id: 2 },],},}); 9.打包 npm run build
