如何完善产品页面

编写 UI Component

随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 umi 里你可以把这部分抽成 component 。

我们来编写一个 ProductList component，这样就能在不同的地方显示产品列表了。

新建 src/components/ProductList.js 文件：

import { Table, Popconfirm, Button } from 'antd';

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}
        />
    );
};

export default ProductList;

定义 dva Model

完成 UI 后，现在开始处理数据和逻辑。

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

新建 model src/models/products.js，

export default{
    namespace: 'products',
    state: {
        products: [
            { name: 'dva', id: 1 },
            { name: 'antd', id: 2 },
        ],
    },
    reducers: {
        delete(state, { payload: id }) {
            let products = state.products.filter(item => item.id !== id);
            return {
                products
            };
        },
    },
};

这个 model 里：

• namespace 表示在全局 state 上的 key
• state 是初始值，在这里是产品列表，实际开发中从后台请求数据。
• reducers 等同于 redux 里的 reducer，接收 action，同步更新 state

umi 里约定 src/models 下的 model 会被自动注入，你无需手动注入。

刷新浏览器，应该能看到以下效果：