dva介紹--快速上手(一)
阿新 • • 發佈:2018-12-18
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/ 目錄下找到這些檔案。