动手实现一个例子

首先第一步安装 dva-cli,安装成功之后即可通过 dva -v 查看版本。

$ npm install dva-cli -g
$ dva -v
dva:command not found

如在未安装成功的情况下，查看版本会出现dva:command not found提示，我们可以通过cnpm再尝试安装一下。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install dva-cli -g  
$ dva -v
dva-cli version 0.10.0

此时dva已安装成功,通过 dva 命令 dva new 创建一个新应用

$ dva new dva-demoOne

这样会创建一个名为 dva-demoOne 的项目文件，包含项目初始化目录和文件，主要为 mock,pulic,src 三大类文件，该项目提供了数据 mock 数据服务，应用构建，开发服务器等服务。进入 dva-demoOne ,执行 npm start 命令。

$ cd dva-demoOne
$ npm start

即可看到:

You can now view Your App in the browser.
  Local:            http://localhost:8000/
  On Your Network:  http://本地ip:8000/
Note that the development build is not optimized.
To create a production build, use npm run build.

在浏览器里打开 http://localhost:8000 ，你会看到 dva 的欢迎界面。我们的例子已雏形初现，接下来我们来添加页面实现一个简单功能。

第一步：我们可以来编辑路由

import Counter from './routes/Counter';
<Route path="/count" exact component={Counter} />

第二步：编写 ui 组件

import React from 'react';
import { connect } from 'dva';
class Counter extends React.Component {
  addNum = () => {
    const {dispatch,counter} = this.props;
    const {count} = counter;
    dispatch({
      type: 'counter/save',
      payload: {count: count + 1}
    })
  };
  reduceNum = () => {
    const {dispatch,counter} = this.props;
    const {count} = counter;
    dispatch({
      type: 'counter/save',
      payload: {count: count - 1}
    })
  };
  reset = () => {
    const {dispatch} = this.props;
    dispatch({
      type: 'counter/reset',
    })
  }
  render (){
    const {count} = this.props.counter;
    return (
      <div>
        {count}
        <button onClick={this.addNum}>增加</button>
        <button onClick={this.reduceNum}>减少</button>
        <button onClick={this.reset}>重置</button>
      </div>
    )
  }
}
export default Counter;

第三步：编写 model

const defaultState = {
  count: 0,
}
export default {
  namespace: 'counter',
  state: {
    ...defaultState
  },
  reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload
      };
    },
    reset(state){
      return {
        ...state,
        ...defaultState
      }
    }
  },
};

我们现在已经完成 model 和 ui 组件，我们需要将 model 和 view 给 connect 起来，dva 提供了 connect 方法。

export default connect(({counter}) => ({counter}))(Counter);

接下来最重要的一点就是不要忘了在 index.js 里面引用 model。

app.model(require('./models/counter').default);

此时访问http://localhost:8000/#/count ，即可看到一个简易的计数器。到此我们的例子已基本完成。接下来会对上述例子中运用到的概念进行解释，不要走开哟。