React Dva入门

create-react-app创建工程只能创建一个最基本的空程序。需要手动安装很多依赖包及代码操作。Dva将一切进行了简化，它是一个封装好很多模块的框架，并且拥有自己的脚手架。用Dva创建的工程，从目录结构起就非常清晰。

创建Dva项目

全局安装Dva脚手架

> npm install dva-cli -g

使用dva -v可以查看版本号

> dva -v
dva-cli version 0.10.1

与create-react-app一样，使用dva在命令行创建app

dva new dva-app

其后进入工程文件并启动工程

cd dva-app
npm start

目录结构

除了index.js的入口文件，和router.js的初始路由，Dva工程的目录结构大致意义如下：

asserts：用于存放静态资源
components：用于存放公共组件，比如页面头尾导航条
routes：用于存放路由组件，可以通俗的理解成页面。与component的区别在于一般是非公共的并且会跟model里的数据模型联系起来
models：用于存放模型文件（个人认为model才是react-redux体系里最重要的部分），我们之前说的state以及reducer都会写在里面，同时，通过connect跟routes里面的组件进行绑定。routes中的组件通过connect拿到model中的数据，model也能通过connect接收到组件中dispatch的action
services：用于存放跟后台交互的服务文件，一般都需要调用后台的接口
utils：用于存放工具类库

整体的流程大致（数据流向）是：

从index入口进入 => 通过url匹配routes里的组件（顺便看看components里有没有啥公共组件需要加载） => routes里的组件dispatch action => model通过action改变state（中途可能会通过services跟后台交互） => 通过connect重新渲染routes中的组件

Dva实践

使用Dva完成路由切换并且做个表格

入口文件

首先，在入口文件index.js中，可以看到已经为我们留了model模型和router路由的位置。在开发中，所有的model模型文件都需要在这里注册，这样才能用connect跟组件联系起来。

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

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

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

先不管Model，Router告诉我们引用了router.js，打开看一眼

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

只有一个，通俗易懂，在路径为/时匹配到IndexPage。（不用我们自己安装Router自己建立router.js自己配置是不是很方便~）注意这里加了exact，表示精确匹配，如果不加则/aaa、/bbb、/whatever都会匹配到IndexPage，精确匹配的话只有输入/的时候才会匹配。

IndexPage里能看到欢迎信息，那个小丑图片和提示文字。

路由切换

（1）安装Antd！虽然Dva很贴心的封装了很多工具包但是并没有封装样式库，所以Antd还是需要自己手动安装

yarn add babel-plugin-import
yarn add antd

并编辑.webpackrc文件

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

（2）新增组件

在routes里新建aaa.js和bbb.js两个组件。内容随便写点，只是为了切换使用。

// aaa.js
import React, { Component } from 'react'
import { connect } from 'dva'

class AAA extends Component { //BBB同理
  render() {
    return (
      <div>
        <h1>AAA</h1>
      </div>
    )
  }
}

AAA.propsTypes = {}
export default connect()(AAA)

（3）定义导航栏

然后，在components里建立两个公共组件header.js和layout.js。

header.js用作页面上方的导航栏，理想效果如下，通过点击不同导航切换地址栏url。

header.js需要引入antd的Menu模块，以及dva封装好的Link。Link的作用即匹配相应的路径。

import React, { Component } from 'react'
import { Menu } from 'antd';
import { Link } from 'dva/router'

class Header extends Component {
  render() {
    return (
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['1']}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="1">
          <Link to="/">Index</Link>
        </Menu.Item>
        <Menu.Item key="2">
          <Link to="/aaa">AAA</Link>
        </Menu.Item>
        <Menu.Item key="3">
          <Link to="/bbb">BBB</Link>
        </Menu.Item>
      </Menu>
    )
  }
}

export default Header;

（4）定义布局

layout.js用来当整体页面布局，我们想把页面分成两部分，上面放导航条下面放子内容。头部需要引入刚刚的header组件，然后以<Header />的方式插入到节点中。props是该组件的属性，用于传递数据，每个组件都有自己的props。props.children表示该组件的所有子节点。

// layout.js
import React, { Component } from 'react'
import { connect } from 'dva';
import Header from '../components/header'

class Layout extends Component {
  render() {
    const { children } = this.props
    return (
      <div>
        <Header />
        <div style={{ background: '#fff', padding: 24 }}>{children}</div>
      </div>
    )
  }
}

export default Layout;

（5）连接路由

此时还差最后一步，就是把路由跟刚刚的这些组件联系起来。我们回到router.js，修改如下：

// router.js
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import Layout from './components/layout'
import IndexPage from './routes/IndexPage';
import AAA from './routes/aaa';
import BBB from './routes/bbb';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Layout>
        <Switch>
          <Route path="/" exact component={IndexPage} />
          <Route path="/aaa" exact component={AAA} />
          <Route path="/bbb" exact component={BBB} />
        </Switch>
      </Layout>
    </Router>
  );
}

export default RouterConfig;

return中的子节点，就是会放到layout.js的props.children中的内容。

以上操作的流程是，在header.js中，我们通过点击不同导航栏，更换地址栏的url；接下来在router.js中，通过匹配地址栏的url，选择加载的子组件呈现到页面上。

路由到此结束，接下来加上列表。

列表操作

（1）创建routes页面组件

在routes/IndexPage.js页面组件里

<div>
  <Button type="primary" onClick={this.changeData}>修改数据</Button>
  <div>
    <Table columns={columns} dataSource={data}/>
  </div>
</div>

Table标签有两个属性，columns是表头，dataSource是数据，均绑定到state。只是这一次，state和action都不是直接写在页面组件下，而是定义到对应的模型文件中。

（2）创建models模型

新建models/index-page.js作为模型文件。可以参考项目自带的example.js，里面已经给出了state，effects和reducers的地方。

namespace是该模型文件的命名空间，也是在全局state上的属性，在routes组件中，我们可以用this.props.某命名空间获取state（根节点）中某命名空间的数据。

export default {
  namespace: 'indexPage',
  state: {
    columns: [{
      title: '城市',
      dataIndex: 'city',
    }, {
      title: '省份',
      dataIndex: 'province',
    }],
    data: [{
      "key": "1",
      "city": "杭州",
      "province": "浙江"
    }, {
      "key": "2",
      "city": "广州",
      "province": "广东"
    }]
  },

  subscriptions: {

  },

  effects: {

  },

  reducers: {

  },
};

（3）通过connect关联数据

回到routes/IndexPage.js页面组件，如果我们在routes中想要使用model里面的数据，需要通过connect工具来传递，其基本用法是connect(从model中获取数据)(绑定到routes组件)。

import React from 'react';
import { connect } from 'dva';
import { Button, Table, Row } from 'antd';

class IndexPage extends React.Component {
  changeData = () => {
    console.log("Change Data");
  };

  render() {
    const { columns, data } = this.props.indexPage; //获取indexPage中的state
    return (
      <div>
        <Button type="primary" onClick={this.changeData}>修改数据</Button>
        <div>
          <Table columns={columns} dataSource={data}/>
        </div>
      </div>
    );
  }
}

export default connect(({ indexPage }) => ({
  indexPage,
}))(IndexPage);

（4）更新index.js中的app.model

// Model
app.model(require('./models/index-page').default);

这样，models/index-page.js的state数据就被绑定到routes/IndexPage.js的Table节点上，列表被赋予了两行值。

services获取数据

（1）创建services

假设有个json数据是这样的，我们想将其当做一行添加到上面表格的列表里。

在services中我们同后台进行交互，新建services/city.js文件

//services/city.js
import request from '../utils/request';

export function getCity() {
  return request('http://www.yezhou.cc/api/city.php');
}

utils/request.js里面已经贴心的自带了request方法用于请求url，直接拿来使用即可。这样，在我们调用getCity()方法时，就会请求数据。

友情提示，以往我们一直习惯直接在model里调用getCity()，然后用setState改变state的值，但这是不符合Dva的规则的，Dva规定我们必须通过触发action才可以改变state，也就是下一步。

（2）触发action

对于这个列表，我们希望点击按钮添加一行。根据前述我们知道，改变state的值需要dispatch(action)，再调用reducer改变state，进而重新渲染，这是Dva规定的数据流传输方式。

这里的action有两种走向，对于同步行为（比如我就改变个按钮颜色），可以直接调用model中的reducer。而对于异步行为（比如从服务器请求数据），需要先触发effects然后调用reducer。

下面我们在routes/IndexPage.js里，通过onClick={this.changeData}按钮事件，触发一个action给模型文件。

//点击按钮触发
changeData = () => {
  console.log("Change Data");
  const { dispatch } = this.props;
  dispatch({
    type: 'indexPage/addCity',
    payload: {},
  });
};

这表示我们要调用models/index-page.js的addCity方法。

在models/index-page.js里，我们需要在effects中定义好这个方法。effects属性的语法可以参考Redux-saga 中文文档，它可以获取全局state，也可以触发action。effects内部使用yield关键字标识每一步的操作，call表示调用异步函数，put表示dispatch(action)。

import { getCity } from '../services/city'

effects: {
  *addCity({ payload }, { call, put }) {  // eslint-disable-line
    const myCity = yield call(getCity, {});
    yield put({
      type: 'ADD_CITY',
      payload: {
        myCity: myCity.data
      },
    });
  },
},

这表明，我们先读取service中的getCity()方法，将它放到payload里，然后调用reducer里面名为ADD_CITY的action，告诉它要改变state。

（3）调用reducer

我们说过，reducer是纯函数，当输入相同时输出也必然相同，其输入参数是当前的state和收到的action，返回一个新的state。...三点运算符的作用是把数组打开进行操作，我们把payload中的信息加在state的原有data之后。

reducers: {
  ADD_CITY(state, action) {
    return { ...state,
      data: state.data.concat(action.payload.myCity) };
  },
},

点击一下按钮，是不是已经添加成功了~

原生redux库需要手动去创建监听重新渲染页面才能看到更新效果，而在Dva中，由于使用了connect，会在内部自动更新，并不用手动刷新。

这样，就完成了一个简单的页面切换和修改state的例子。