ant design Projects

Installation Umi UI | create a new application

Reference official website

---

The first step: New Route

Create a route:

umi g page products

Directory src/pageswill be added products.jsand products.csstwo files

Step Two: Write UI Component

Open in the editor, the new src/components/ProductList.jsfile

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;

The third step: Define dva Model

After completing the UI interface, start 处理数据and逻辑

New model src/models/products.js

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

Explanation

• namespace: Indicates key on the global state of
• state: Is the initial value, in this case (the initial value will be empty array app.jsis initialStatedefined)
• reducers: Equivalent to redux the reducer, receiving action, state synchronization update

note

umi stipulated src/modelsunder modelwill be injected automatically, without manual injection

Step four: connect it in the pages of the document

Edit src/pages/products.js, Replace the following content

import { connect } from 'dva';
import ProductList from '../components/ProductList';

const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

export default connect(({ products }) => ({
  products,
}))(Products);

Finally: the definition of the initial data

要让整个应用跑起来，还需要定义下初始数据

editsrc/app.js

export const dva = {
  config: {
    onError(err) {
      err.preventDefault();
      console.error(err.message);
    },
    initialState: {
      products: [{ name: 'dva', id: 1 }, { name: 'antd', id: 2 }],
    },
  },
};

---

See page effects, operating under the page to confirm the completion ...