正文

002-and design-基于dva的基本项目搭建

IP云
IP云V管理员/6 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、概述

在真实项目开发中，你可能会需要 Redux 或者 MobX 这样的数据应用框架，Ant Design React 作为一个 UI 库，可以和任何 React 生态圈内的应用框架搭配使用。我们也基于 Redux 推出了自己的最佳实践 dva，推荐你在项目中使用。

dva 是一个基于 React 和 Redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。

1.1、安装 dva-cli 
npm install dva-cli -g

dva -v

1.2、创建新应用

创建项目 

dva new dva-quickstart

进入 dva-quickstart 目录，并启动开发服务器： 

cd dva-quickstart

npm start

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

1.3、使用 antd

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

npm install antd babel-plugin-import --save

安装过程中如果有权限问题可以使用sudo执行以上命令

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

{

  "extraBabelPlugins": [

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

  ]

}

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

1.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} />

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

注意：访问地址中间的#

1.5、编写 UI Component

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

我们来编写一个 ProductList 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;

1.6、定义Model

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

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);

    },

  },

};

这个 model 里：

  • namespace 表示在全局 state 上的 key

  • state 是初始值，在这里是空数组

  • reducers 等同于 redux 里的 reducer，接收 action，同步更新 state

然后别忘记在 index.js 里载入他： 

// 3. Model

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

1.7、connect起来

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

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 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);

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

// 1. Initialize

// const app = dva();

const app = dva(

  {

    initialState: {

      products: [

        {name: 'dva', id: 1},

        {name: 'antd', id: 2},

      ],

    },

  }

);

1.8、构建应用 
npm run build
npm tun start

访问：http://localhost:8000/#/products

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

1.9、更多

比如：

  • 如何处理异步请求

  • 如何优雅地加载初始数据

  • 如何统一处理出错，以及特定操作的出错

  • 如何动态加载路由和 Model，以加速页面载入速度

  • 如何实现 hmr

  • 如何 mock 数据

  • 等等

你可以：

  • 访问 dva 官网

  • 理解 dva 的 8 个概念 ，以及他们是如何串起来的

  • 掌握 dva 的所有 API

  • 查看 dva 知识地图 ，包含 ES6, React, dva 等所有基础知识

  • 查看 更多 FAQ，看看别人通常会遇到什么问题

  • 如果你基于 dva-cli 创建项目，最好了解他的 配置方式

相关阅读

目录[+]