dva.js 用法总结

　dva.js是阿里前端团队开发的一个基于react、redux、webpack的一个前端框架，他能够实现react-redux-webpack环境一键部署，能帮前端工程师节省不少环境搭建的时间。而且经过优化的redux跟原生redux相比使用起来要方便不少。这里来大致讲一下dva.js的用法。

 

dva.js官方案例：

https://ant.design/docs/react/practical-projects-cn

github:

https://github.com/dvajs/dva

 

先全局安装dva-cli

cnpm install dva-cli -g

使用dva-cli初始化应用：

dva new your-project-name

然后进入项目目录，新建文件dev.bat，内容如下：

call npm run start

保存后双击dev.bat即可开启开发服务器，并出现初始页面。

这里我们用一个加法计数器来作为演示。

1、routes文件夹内新建demo.js以及demo.css

import {connect} from 'dva'
import styles from './demo.css'

function demo({dispatch,num}) {      //dispatch用来操作数据模型。

  function Add() {
    console.log(num);
    dispatch({
      type:"num/add",       //num代表数据模型，add代表方法。这里可以通过payload来传递参数。
　　　　// payload: 1,          
    })
  }

  return(
    <div className={styles.checkNum}>
      <input type="button" value="+" onClick={Add}/>
      <input type="input" value={num}/>
      <input type="button" value="-"/>
    </div>
  )
}


export default connect(        //将组件与数据模型进行连接。
  ({num})=>({num})
)(demo);

demo.css:

.checkNum{
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
}

 

2、models文件夹新建文件num.js

export default {
  namespace:'num',
  state:0,
  reducers:{
    'add'(state){        //num可以理解为数据模型，state是数据的初始值，add是方法名，用来修改num用的。如果需要传参可参考官方教程。（payload）
      state++;
      return state
    }
  }
}

 

3、前往src下的index.js，注册num数据模型：

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


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

app.model(require('./models/num').default);
app.router(require('./router').default);

这步如果粗心的话就容易遗漏，务必小心。

 

4、src文件夹下的router.js内添加demo路由：

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

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

      </Switch>
    </Router>
  );
}

export default RouterConfig;

 

这时，访问http://localhost:8000/#/demo即可看到成果。

请大家自行完成减法功能并看懂官方案例以巩固知识。

想要进一步了解dva.js请看下一篇：dva.js的数据获取与渲染。

http://www.cnblogs.com/axel10/p/8548305.html