如何完善产品页面
编写 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 上的 keystate
是初始值,在这里是产品列表,实际开发中从后台请求数据。reducers
等同于 redux 里的 reducer,接收 action,同步更新 state
umi 里约定 src/models
下的 model 会被自动注入,你无需手动注入。
刷新浏览器,应该能看到以下效果: