快速上手

安装 dva-cli

通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。

  1. $ npm install dva-cli -g
  2. $ dva -v
  3. dva-cli version 0.9.1

创建新应用

安装完 dva-cli 之后，就可以在命令行里访问到 dva 命令（不能访问？）。现在，你可以通过 dva new 创建新应用。

  1. $ dva new dva-quickstart

这会创建 dva-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。

然后我们 cd 进入 dva-quickstart 目录，并启动开发服务器：

  1. $ cd dva-quickstart
  2. $ npm start

几秒钟后，你会看到以下输出：

  1. Compiled successfully!
  3. The app is running at:
  5.   http://localhost:8000/
  7. Note that the development build is not optimized.
  8. To create a production build, use npm run build.

在浏览器里打开 http://localhost:8000 ，你会看到 dva 的欢迎界面。

使用 antd

通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的，详见 repo 。

  1. $ npm install antd babel-plugin-import --save

编辑 .webpackrc，使 babel-plugin-import 插件生效。

  1. {
  2. +  "extraBabelPlugins": [
  3. +    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  4. +  ]
  5. }

注：dva-cli 基于 roadhog 实现 build 和 dev，更多 .webpackrc 的配置详见 roadhog#配置

定义路由

我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。

新建 route component routes/Products.js，内容如下：

  1. import React from 'react';
  3. const Products = (props) => (
  4.   <h2>List of Products</h2>
  5. );
  7. export default Products;

添加路由信息到路由表，编辑 router.js :

  1. + import Products from './routes/Products';
  2. ...
  3. + <Route path="/products" exact component={Products} />

然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的 <h2> 标签。

编写 UI Component

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

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

新建 components/ProductList.js 文件：

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import { Table, Popconfirm, Button } from 'antd';
  5. const ProductList = ({ onDelete, products }) => {
  6.   const columns = [{
  7.     title: 'Name',
  8.     dataIndex: 'name',
  9.   }, {
  10.     title: 'Actions',
  11.     render: (text, record) => {
  12.       return (
  13.         <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
  14.           <Button>Delete</Button>
  15.         </Popconfirm>
  16.       );
  17.     },
  18.   }];
  19.   return (
  20.     <Table
  21.       dataSource={products}
  22.       columns={columns}
  23.     />
  24.   );
  25. };
  27. ProductList.propTypes = {
  28.   onDelete: PropTypes.func.isRequired,
  29.   products: PropTypes.array.isRequired,
  30. };
  32. export default ProductList;

定义 Model

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

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

新建 model models/products.js ：

  1. export default {
  2.   namespace: 'products',
  3.   state: [],
  4.   reducers: {
  5.     'delete'(state, { payload: id }) {
  6.       return state.filter(item => item.id !== id);
  7.     },
  8.   },
  9. };

这个 model 里：

  • namespace 表示在全局 state 上的 key
  • state 是初始值，在这里是空数组
  • reducers 等同于 redux 里的 reducer，接收 action，同步更新 state然后别忘记在 index.js 里载入他：
  1. // 3. Model
  2. + app.model(require('./models/products').default);

connect 起来

到这里，我们已经单独完成了 model 和 component，那么他们如何串联起来呢?

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。

编辑 routes/Products.js，替换为以下内容：

  1. import React from 'react';
  2. import { connect } from 'dva';
  3. import ProductList from '../components/ProductList';
  5. const Products = ({ dispatch, products }) => {
  6.   function handleDelete(id) {
  7.     dispatch({
  8.       type: 'products/delete',
  9.       payload: id,
  10.     });
  11.   }
  12.   return (
  13.     <div>
  14.       <h2>List of Products</h2>
  15.       <ProductList onDelete={handleDelete} products={products} />
  16.     </div>
  17.   );
  18. };
  20. // export default Products;
  21. export default connect(({ products }) => ({
  22.   products,
  23. }))(Products);

最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js：

  1. - const app = dva();
  2. + const app = dva({
  3. +   initialState: {
  4. +     products: [
  5. +       { name: 'dva', id: 1 },
  6. +       { name: 'antd', id: 2 },
  7. +     ],
  8. +   },
  9. + });

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

快速上手 - 图1

构建应用

完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令：

  1. $ npm run build

几秒后，输出应该如下：

  1. > @ build /private/tmp/myapp
  2. > roadhog build
  4. Creating an optimized production build...
  5. Compiled successfully.
  7. File sizes after gzip:
  9.   82.98 KB  dist/index.js
  10.   270 B     dist/index.css

build 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 dist/ 目录下找到这些文件。