dva+react+antd

dva 是一个基于 react 和 redux 的轻量应用框架，redux步骤繁杂，更容易出错，搭建成本更高。

1.安装dva-cli：确保版本在0.7.0或以上

?

1 2 3

$ npm install dva-cli -g $ dva -v 0.7.6

2.创建新应用

?

1	$ dva new dva-quickstart

3.启动程序

?

1 2	$ cd dva-quickstart $ npm start

4.使用antd框架

?

1	$ npm install antd babel-plugin-import --save

编辑 .roadhogrc，使 babel-plugin-import （按需加载）插件生效。

?

1 2 3 4

"extraBabelPlugins": [      "transform-runtime",      ["import", { "libraryName": "antd", "style": "css" }] ],

5.定义路由

新建 route component routes/products.js，内容如下：

?

1 2 3 4 5 6 7

import React from 'react';   const Products = (props) => (   <h2>List of Products</h2> );   export default Products;

添加路由信息到路由表，编辑 router.js :

?

1 2 3

import products from './routes/products';   <Route path="/products" component={products} />

然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的 <h2> 标签。

6.编写页面

新建 components/list.js 文件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

import React from 'react'; import PropTypes from 'prop-types'; import { Table, Popconfirm, Button } from 'antd';   const List = ({ 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}     />   ); };   List.propTypes = {   onDelete: PropTypes.func.isRequired,   products: PropTypes.array.isRequired, };   export default List;

7.定义model

新建 model models/products.js ：

?

1 2 3 4 5 6 7 8 9 10 11

import dva from 'dva';   export default {   namespace: 'products',   state: [],   reducers: {     'delete'(state, { payload: id }) {       return state.filter(item => item.id !== id);     },   }, };

在 index.js 里载入他：

?

1	app.model(require('./models/products'));

8.connect起来

编辑 routes/products.js，替换为以下内容：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import React from 'react'; import { connect } from 'dva'; import List from '../components/list';   const Products = ({ dispatch, products }) => {   function handleDelete(id) {     dispatch({       type: 'products/delete',       payload: id,     });   }   return (     <div>       <h2>List of Products</h2>       <List onDelete={handleDelete} products={products} />     </div>   ); };   // export default Products; export default connect(({ products }) => ({   products, }))(Products);

我们还需要一些初始数据让这个应用 run 起来。编辑 index.js：

?

1 2 3 4 5 6 7 8

const app = dva({   initialState: {     products: [       { name: 'dva', id: 1 },       { name: 'antd', id: 2 },     ],   }, });

参考链接：https://ant.design/docs/react/practical-projects-cn

完整项目git地址：git clone https://github.com/zyy0816/dva-react-antd.git

拉取后启动项目三步骤：

1.安装依赖：npm install

2.启动项目： npm start

3.浏览器打开：http://localhost:8000/#/

　　　　　　http://localhost:8000/#/products