一、DvaJS 介绍

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

特性

• 易学易用
  仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用 后更是降低为 0 API
• elm 概念
  通过 reducers, effects 和 subscriptions 组织 model
• 插件机制
  比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
• 支持 HMR
  基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

二、DvaJS 使用

1.安装 dva-cli

$ cnpm install -g dva-cli

安装成功之后查看 dva 版本

$ dva -v

2.创建新应用

$ dva new dva-app

创建成功后进入 dva-app 目录

$ cd dva-app

并启动开发服务器

$ npm start

3.使用 antd

$ cnpm install --save antd babel-plugin-import

编辑 .webpackrc ，使 babel-plugin-import 插件生效

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

三、示例

article.js

讯享网//[src/models/article.js] //article的model import { 
   findArticle} from '../services/article'; export default { 
    namespace: 'article', state: { 
    msg:'hello', articleData:[] }, //异步action effects: { 
    //payload: action.payload //call 调用service文件夹中的方法 service是异步请求 //put: 转发action *getData1({ 
    payload }, { 
    call, put }){ 
    //call 第一个参数是service层的方法,第二个参数是service层方法需要的数据 let res = yield call(findArticle, payload); yield put({ 
   type:'changeArticleData',payload:res.data.list}) } }, //同步action reducers: { 
    //changeMsg就是action的type changeMsg1(state,action){ 
    return { 
    ...state, msg:action.payload } }, changeArticleData(state,action){ 
    return { 
    ...state, articleData:action.payload } } }, }; 

index.js

//[src/models/index.js] const context = require.context('./', false, /\.js$/); export default context .keys() .filter(item => item !== './index.js') .map(key => context(key)); 

Article.js

讯享网//[src/routes/Article.js] import React, { 
    Component } from 'react'; import { 
   Button} from 'antd'; import { 
   connect} from 'dva'; class Article extends Component { 
    render() { 
    return ( <div> hello { 
   JSON.stringify(this.props.article)} <Button type="primary" onClick={ 
   this.props.changeMsg}>更改同步数据</Button> <Button type="primary" onClick={ 
   this.props.getData}>获取异步数据</Button> </div> ); } } const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    changeMsg: () => { 
    //分发action 分发到article命名空间底下的action dispatch({ 
   type:'article/changeMsg1',payload:'111'}); }, getData:()=>{ 
    //分发action  dispatch({ 
   type:'article/getData1',payload:{ 
   page:0,pageSize:10}}); } } } export default connect(state => state, mapDispatchToProps)(Article); 

article.js

//[src/services/article.js] //article的service import axios from '../utils/axios'; export const findArticle = (params)=>{ 
    return axios.get('/manager/article/findArticle',{ 
   params}); } 

axios.js

//[src/utils/axios.js] import config from './config'; //axios的配置 import axios from 'axios'; import qs from 'qs'; axios.defaults.baseURL = config.baseURL; //拦截器 响应回来后拦截处理 axios.interceptors.response.use((response)=>{ 
    // console.log(response); //封装返回的数据 //response.data是服务器返回的数据 let res = { 
    ...response, data: response.data.data, status: response.data.status, statusText: response.data.message }; return res; },(error)=>{ 
    //响应失败后拦截 return Promise.reject(error); }); //post请求发送前拦截 axios.interceptors.request.use((config) => { 
    //config.data是json格式的数据，再使用qs转成表单格式数据 //请求发送前拦截处理 // console.log(config); if (config.method === 'post') { 
    config.data = qs.stringify(config.data); } return config; },(error)=>{ 
    //请求发送失败处理 return Promise.reject(error); }); export default axios; 

config.js

//[src/utils/config.js] const baseURL = 'http://134.175.154.93:8099'; export default { 
    baseURL } 

index.js

//[src/index.js] import dva from 'dva'; import './index.css'; import router from './router'; //article数据模型 // import article from './models/article'; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model // app.model(require('./models/example').default); // app.model(article); require('./models').default.forEach(key => { 
    app.model(key.default); }); // 4. Router // app.router(require('./router').default); app.router(router); // 5. Start app.start('#root'); 

router.js

//[src/router.js] //页面组件 import React from 'react'; import { 
    Router, Route, Switch } from 'dva/router'; import IndexPage from './routes/IndexPage'; import Article from './routes/Article'; function RouterConfig({ 
    history }) { 
    return ( <Router history={ 
   history}> <Switch> <Route path="/" exact component={ 
   IndexPage} /> <Route path="/article" exact component={ 
   Article} /> </Switch> </Router> ); } export default RouterConfig;