欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

dva.js 用法总结

程序员文章站 2022-07-07 09:07:59
dva.js是阿里前端团队开发的一个基于react、redux、webpack的一个前端框架,他能够完成react-redux-webpack环境一键部署,能帮前端工程师节省不少环境搭建的时间。而且经过优化的redux跟原生redux相比使用起来要方便不少。这里来大致讲一下dva.js的用法。 先全 ......

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

先全局安装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来传递参数。
    })
  }

  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官方案例:

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

github:

https://github.com/dvajs/dva