初识react(五) 数据流终极解决方案 dva(零配置)

时间 2019-11-16

原文原文链接

chaiguanpeng.github.io/

回顾

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

npm i dva-cli@next -g  //安装下一代dva-cli，内置umi
dva new dvaTest
cd dvaTest
npm 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的效果react

一、主入口文件

import React from 'react';
import dva from 'dva';
import Counter from './Counter';
//dva是一个函数，经过执行它能够拿到一个app对象
let app = dva();
//一个模板就是一个状态，而后把reducer和状态 写在一块儿了，
//添加一个模块
app.model({
   xxxx
});
//参数是一个函数，此应用自己就是要渲染函数的返回值
app.router(() => <Counter />);

//本质是启动应用，就是经过app.router获取组件，而且经过ReactDOM渲染到容器内容
app.start('#root');

复制代码

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

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

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  };
        }
    }
});

复制代码

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

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

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

redux中概念还不清楚看这里

二、编写Counter.js组件

import React from 'react';
import { connect } from 'dva';
class Counter extends React.Component {
    render() {
        return (
            <div className="container">
                <div className="current">
                    当前记录:{this.props.current}
                </div>
                <div className="addButton">
                    <button onClick={() => this.props.dispatch({ type: 'counter/save'，payload:2 })}>+</button>
                </div>
            </div>
        )
    }
}
export default connect(
    state => {
        return state.counter;
    }
)(Counter);

复制代码

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

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

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

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

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

咱们用express编写简单接口,不讲解express用法。 express直通车跨域

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

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

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

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

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

五、在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 });
        }
    },
复制代码

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

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

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

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

测试结果

完结

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

若是对您有帮助，点个喜欢再走呗
更多优质文章参考
redux全部源码解析戳这里