dva+react项目搭建

Posted 2020-09-28 小金鱼紫苏

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

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

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

2.创建新应用

$ dva new dva-quickstart

3.启动程序

$ cd dva-quickstart
$ npm start

4.使用antd框架

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

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

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

5.定义路由

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

import React from ‘react‘;

const Products = (props) => (
  <h2>List of Products</h2>
);

export default Products;

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

import products from ‘./routes/products‘;

<Route path="/products" component={products} />

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

6.编写页面

新建 components/list.js 文件：

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 ：

import dva from ‘dva‘;

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

在 index.js 里载入他：

app.model(require(‘./models/products‘));

8.connect起来

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

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：

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

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

完整项目地址：待定

安装依赖：npm install

启动项目： npm start

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

　　　　　　http://localhost:8000/#/products