1.安裝dva-cli

通過 npm 安裝 dva-cli 並確保版本是 0.9.1 或以上

npm install dva-cli -g

2.建立新應用

dva new dva-quickstart

然後我們 cd 進入 dva-quickstart 目錄，並啟動開發伺服器：

cd dva-quickstart
npm start

3.使用antd

通過 npm 安裝 antd 和 babel-plugin-import 。babel-plugin-import 是用來按需載入 antd 的指令碼和樣式的

npm install antd babel-plugin-import --save
 

編輯 .webpackrc，使 babel-plugin-import 外掛生效。

{
+  "extraBabelPlugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+  ]
}

4.定義路由

新建 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" exact component={Products} />

5.編寫 UI Component

新建 components/ProductList.js 檔案：

import React from 'react';
import PropTypes from 'prop-types';
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}
    />
  );
};

ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};

export default ProductList;
 

6.定義 Model

dva 通過 model 的概念把一個領域的模型管理起來，包含同步更新 state 的 reducers，處理非同步邏輯的 effects，訂閱資料來源的 subscriptions 。 新建 model models/products.js ：

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

namespace表示在全域性state上的key state是初始值，在這裡是空陣列 reducers同於 redux 裡的 reducer，接收 action，同步更新 state

然後別忘記在 index.js 裡載入他：

//  Model
+ app.model(require('./models/products').default);

7.connect 起來

編輯 routes/Products.js，替換為以下內容：

import React from 'react';
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 Products;
export default connect(({ products }) => ({
  products,
}))(Products);

8.構建應用

npm run build

build 命令會打包所有的資源，包含 JavaScript, CSS, web fonts, images, html 等。然後你可以在 dist/ 目錄下找到這些檔案。