一、dva基础

^2.4.1。简单说这东西就是用来定义model，然后把model中的数据和页面进行交互的。

model的功能主要有两个，第一个是维护一个全局的state，第二个是发送异步请求。

model的state里面存放的数据应该是所有组件全局共享的数据，组件局部的数据还是要放在组件自己的state里面。

要使用dispatch，connect是必要的，使用了connect才可以使用dispath，但是connect的return可以不返回值。如果需要发送异步请求之后，改变自己组件里面局部的state值，就在dispatch的action里面传一个callback()过去，在callback()里面使用this.setState(),就行了。

一、简介

命名由来：D.Va拥有一部强大的机甲，它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、 还有可以抵御来自正面的远程攻击的防御矩阵。

dva 首先是一个基于 redux 和 redux-saga(异步操作) 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架

redux-saga: 具体到dva中就是Effect的引入。redux-saga 是一个 redux 中间件，能访问完整的 redux state，也可以 dispatch redux action

dva仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API

elm 概念，通过 reducers, effects 和 subscriptions 组织 model

二、快速上手

1、安装dva-cli

安装：npm install dva-cli -g， dva -v,确保版本是 0.9.1 或以上

2、创建新应用

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

设置端口号："start": "set PORT=3001&&roadhog server",在package.json中配置

3、使用 antd

安装: $ npm install antd babel-plugin-import --save, babel-plugin-import 是用来按需加载 antd 的脚本和样式的

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

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

4、定义路由(构建应用第一步)

一般是在config里面去编写。这里定义路由是可以用umi的，主要就是让路由对应到下面的component。

import React from 'react';
const Products = (props) => (<h2>List of Products</h2>);
export default Products;

添加路由信息到路由表，编辑 router.js。然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的 <h2>标签

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

5、编写 UI Component(构建应用第二步)

在page文件夹里面去创建当前应用的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;