关于Dva

Dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。

官网的项目实战讲解

全局安装dva

有-g就是全局安装

cnpm install dva-cli -g

查看dva版本，存在则可用dva命令


dva -v
dva-cli version 0.9.1

创建应用

通过 dva new 创建新应用,下方pro-name填写你要创建的应用的命名

dva new pro-name

耐心等出现happy hacking!即成功了。

打开应用

进入文件并使用默认命令打开入口文件

cd pro-name
cnpm start

此时将自动打开一个链接为http://localhost:8000/的你的应用

这里写图片描述
如上图证明进入了这个依赖了dva的react项目了

查看初始配置理解

我的笔记：【React学习笔记】【应用的结构】有详细说明基础react项目各部分文件及依赖的理解 ClickHere》

如下图为dva创建的react应用的package.json文件，其中的依赖已经集成了部分。

像dependencies里的dva就已经集成了 redux、redux-saga 和 react-router。无需另外在安装依赖。
devDependencies放置项目在开发和测试环境中依赖的包，其中最明显作用的就是ESlint的包，这是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
这里写图片描述
开发过程中获得ESlint错误显示可给编辑器进行设置，此处以webstorm作为例子

若语法有错误，则如下图，显示红色波浪线，以及右边的红色色块提示。

使用 antd

通过 npm 安装 antd 和 babel-plugin-import 。–save用于将这两个东西加载在package.json

npm install antd babel-plugin-import --save

如下图：
这里写图片描述
其中babel-plugin-import 是用来按需加载 antd 的脚本和样式的。按需加载如下：import { Button } from ‘antd’;按需加载了ant里面的Button组件。

尝试写一个新页面（创建路由）

新建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，就能看到如下新的页面
这里写图片描述

简单写个List（详解各个地方）

效果

这里写图片描述

组件UI Component

新建 components/ProductList.js 文件：

import React from 'react';
// 利用prop-types第三方库对组件的props中的变量进行类型检测
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button } from 'antd';

// onDelete，products从父组件routes/Products中的组件通过属性通信，将值传给了本子组件。其中products是表格所需的数组数据
const ProductList = ({ onDelete, products }) => {
// 官方文档查看基本表格的形式
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }, {
    title: 'Actions',
    render: (text, record) => {
    // 此处的text是指该表格当行的值，此处return没有应用可以删除，而record理解为表明该行全部的值，具体的属性即为我们设置的dataIndex。比如以下的record.id即为当行数据对应id值，record.name即为当行数据对应name值
      return (
        <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  }];
  return (
    <Table
      dataSource={products}
      columns={columns}
    />
  );
};

//组件的props中的变量进行类型检测
ProductList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  products: PropTypes.array.isRequired,
};

// 出口组件
export default ProductList;

定义 Model（处理数据、及其逻辑）

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects（理解像ajax的东西调用后台api就好），订阅数据源的 subscriptions 。
新建 model models/products.js ：

export default {
  namespace: 'products',
  state: [],
  reducers: {
  //此处是模拟一个api，通过delete得知数据操作，使用filter删除对应id的数据。实际开发中一般是post一个你要删除的对象的key或者多个对象的key数组即可。
    'delete'(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};

理解：
1. namespace 表示在全局 state 上的 key
2. state 是初始值，在这里是空数组
3. reducers 等同于 redux 里的 reducer，接收 action，同步更新 state

在 index.js载入你的model

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

connect 起来

串联model 和 component
编辑 routes/Products.js（也就是修改你的新页面）：
这只是其中一种写法

import React from 'react';
// dva提供的 connect 方法
import { connect } from 'dva';
// ProductList 组件入口（即那个表格）
import ProductList from '../components/ProductList';


const Products = ({ dispatch, products }) => {
//调用串联的model，命名空间为ProductList 的delete，并传id过去
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      // 引入ProductList 组件，调用了handleDelete方法获取子组件的方法onDelete中传值的id，通过属性值传了表格的数据给子组件。
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

// export default Products;
// 串联命名空间为products的model
export default connect(({ products }) => ({
  products,
}))(Products);

最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js：
initialState初始添加了状态值products。此处只用于静态调试用的数据。

- const app = dva();
+ const app = dva({
+   initialState: {
+     products: [
+       { name: 'dva', id: 1 },
+       { name: 'antd', id: 2 },
+     ],
+   },
+ });

刷新浏览器，应该能看到效果。

警告