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便可开启开发服务器，并出现初始页面。

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

一、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;
}

 

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

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

 

三、前往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);

这步若是粗心的话就容易遗漏，务必当心。

 

四、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