002-and design-基於dva的基本項目搭建

時間 2019-11-19

標籤 design 基於 dva 基本項目搭建简体版

原文原文鏈接

1、概述

在真實項目開發中，你可能會須要 Redux 或者 MobX 這樣的數據應用框架，Ant Design React 做爲一個 UI 庫，能夠和任何 React 生態圈內的應用框架搭配使用。咱們也基於 Redux 推出了本身的最佳實踐 dva，推薦你在項目中使用。css

dva 是一個基於 React 和 Redux 的輕量應用框架，概念來自 elm，支持 side effects、熱替換、動態加載、react-native、SSR 等，已在生產環境普遍應用。html

1.一、安裝 dva-cli

npm install dva-cli -g
dva -v

1.二、建立新應用

建立項目react

dva new dva-quickstart

進入 dva-quickstart 目錄，並啓動開發服務器：webpack

cd dva-quickstart
npm start

在瀏覽器裏打開 http://localhost:8000 ，你會看到 dva 的歡迎界面。git

1.三、使用 antd

經過 npm 安裝 antd 和 babel-plugin-import 。babel-plugin-import 是用來按需加載 antd 的腳本和樣式的，詳見 repo 。github

npm install antd babel-plugin-import --save

安裝過程當中若是有權限問題能夠使用sudo執行以上命令web

編輯 .webpackrc，使 babel-plugin-import 插件生效。npm

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

注：dva-cli 基於 roadhog 實現 build 和 dev，更多 .webpackrc 的配置詳見 roadhog#配置redux

1.四、定義路由

咱們要寫個應用來先顯示產品列表。首先第一步是建立路由，路由能夠想象成是組成應用的不一樣頁面。react-native

新建 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.五、編寫 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.六、定義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.七、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},
      ],
    },
  }
);