如何完善产品页面

2018-11-26 0 条评论 854 次阅读 0 人点赞

编写 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 会被自动注入,你无需手动注入。

刷新浏览器,应该能看到以下效果:

mmx

我很懒,什么也不想说。

文章评论(0)