本文共 3550 字，大约阅读时间需要 11 分钟。

 

 

回顾

纠正下，零配置是由帮我们实现的，不是dva帮我们做的，但是dva-cli在下一个版本(即dva-cli 1.0)已经内置了umi，简直开发者福音,有兴趣朋友可以体验下最新版本。

npm i dva-cli@next -g  //安装下一代dva-cli，内置umidva new dvaTestcd dvaTestnpm start复制代码

我们这里还是从最基本的dva开始讲起，了解流程。重点：dva并没有发明新的概念，全都是以前提到的。只是进行了一层封装，对redux、saga中的概念很清楚的话，dva就是白给你的，没有难点，不会来找我。

简介

• 基于 redux、redux-saga 和 react-router 的轻量级前端框架。
• dva是基于react+redux最佳实践上实现的封装方案，简化了redux和redux-saga使用上的诸多繁琐操作

数据流向

• 数据的改变发生通常是通过：
  • 用户交互行为（用户点击按钮等）
  • 浏览器行为（如路由跳转等）触发的
• 当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。

实现的demo效果

由于dva比较简单，没有什么新概念用例子讲解会更明白。最后要实现一个异步获取数据 num，然后点击计数器 + num的效果

• 目录结构

 

 

 

1、主入口文件

import React from 'react';import dva from 'dva';import Counter from './Counter';//dva是一个函数，通过执行它可以拿到一个app对象let app = dva();//一个模板就是一个状态，然后把reducer和状态 写在一起了，//添加一个模块app.model({   xxxx});//参数是一个函数，此应用本身就是要渲染函数的返回值app.router(() => 
   );//本质是启动应用，就是通过app.router获取组件，并且通过ReactDOM渲染到容器内容app.start('#root');复制代码

以上是最基本的dva的主入口文件，简单的3个API，app.model、app.router、app.start，就已经讲react、redux-router、redux、redux-saga整合一起，简直开发者福音。我们讲解下怎么用

• dva是一个函数，通过执行它可以拿到一个app对象
• app.model()添加一个模块，下面重点讲解
• app.router()接受函数，然后渲染函数返回值
• app.start('#root')，通过app.router获取组件，然后通过ReactDom渲染到容器

1.1、app.model()用法

• 接受一个对象，把state、reducers、effects全部写在这，便于维护。

app.model({    //命名空间。因为一个应用会有很多个模型,每个模型要有一个名字    namespace: 'counter',    //此命名空间的默认状态    state: { current: 0, highest: 0 },    //它是用来接收action,修改仓库状态的    reducers: {        save(state, action) {            return { current:state.current+action.payload  };        }    }});复制代码

看见这些名词应该很熟悉吧

• namespace命名空间，我们需要给模型一个名字
• state=>状态，就是redux中的状态
• reducers=>处理器，就是redux中的处理器

在强调遍,dva没有发明新的概念，只是进行了一层封装。让状态更利于维护

2、编写Counter.js组件

import React from 'react';import { connect } from 'dva';class Counter extends React.Component {    render() {        return (            
   
                
    
                         当前记录:{this.props.current}                
    
                
    
                    
      this.props.dispatch({ type: 'counter/save'，payload:2 })}>+                
    
            
   
        )    }}export default connect(    state => {        return state.counter;    })(Counter);复制代码

不过多解释，有2个地方需要注意:

• 组件内部派发动作时，type:'counter/add'，前面多了counter(命名空间)
• connect时的状态是总的状态，需要制定下需要counter的状态

 

 

 

目前为止，dva流程已经跑通了，是不是很简单，我们测试下是否能点击加2

 

 

 

完美实现，说好的异步呢，接下来我们用express编写一个简单接口

3、编写服务端接口 server.js

我们用express编写简单接口,不讲解express用法。

let express = require('express');let cors = require('cors'); //解决跨域的包let app = express();app.use(cors()); //使用中间件corsapp.get('/amount', function (req, res) {    res.send({ amount: 5 });});app.listen(3000);复制代码

• 接下来启动服务,看下效果

4、客户端发请求获取数据

由于案例比较简单，都写在了src/index.js中

function getAmount() {    return fetch('http://localhost:3000/amount', {        headers: {            "Accept": "application/json"        }    }).then(res => res.json());}复制代码

5、在app.model中添加effects(副作用) (就是redux-saga中的effects)

effects: {        //表示这是一个generator effect=redux-saga/effects        *add(action, { call, put }) {            let { num } = yield call(getAmount);             yield put({ type: 'save', payload: num });        }    },复制代码

先异步获取数据，然后再派发动作修改状态，接着刷新视图

6、对应的组件新增一个异步记数的按钮

 this.props.dispatch({ type: 'counter/save',payload:2 })}>同步加2 this.props.dispatch({ type: 'counter/add' })}>异步记数复制代码

• 增加了一个异步计数按钮，会派发add动作类型。
• add类型被effects(副作用)中的add监听到，执行 getAmount()异步获取数据
• 拿到数据后派发save动作，被reducers处理
• 页面刷新

测试结果

 

 

 

完结

dva 简化了redux和redux-saga使用上的诸多繁琐操作,便于我们开发，可维护性也更高，配合umi使用，号称零配置，下篇文章会讲解dva+umi使用

• 如果对您有帮助，点个喜欢再走呗

作者：言sir 链接：https://juejin.im/post/5ba3183cf265da0ac726f1d3 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。