Dva 的基本使用——计数器

前言： Dva 相比于 redux ，是非常的好用，不用过多的配置就能轻松上手，肯定是未来的大主流，但是现在可没多少公司用它，为什么那？很简单因为 Dva 内部集成了不少东西，例如：redux ，redux-saga 等等，我们无法指定它的版本，这是它现在不被大规模采用，甚至取代 redux 的根本原因。

现在我们来实现一个延时计数器：

一、文件目录

文件目录

• main.js

// 引入react翻译JS小语法
import React from "react";

// 引入dva
import Dva from "dva";
// 引入APP组件
import App from "./App";
//  dva的主要配置
import count from "./count";
// 创建应用
const app = Dva();
// 注册 Model
app.model(count);
// 注册视图
app.router(()=><App/>);
// 启动应用
app.start("#app");

• App.js

import React, { Component } from 'react'
import {connect} from "dva";
// connect粘合剂，和dva通信
@connect(
    ({count})=>({
        a : count.a
    })
)
export default class App extends Component {
    render() {
        return (
            <div>
                <h1>{this.props.a}</h1>
                <button onClick = {()=>{
                    // dispatch命令必须的加命名空间再写命令
                    this.props.dispatch({"type":"count/ADD"})
                }}>我们趁风使柁</button>
            </div>
        )
    }
}

• count.js

export default {
    // namespace: 当前 Model 的名称。
    namespace : "count",
    // 数据存储的地方
    state : {
        a : 200
    },
    //  Action 处理器，处理同步动作
    reducers : {
        // 同步监听
        ADD_(state,action){
            return {
                ...state,
                a : state.a + 19
            }
        }
    },
    //   Action 处理器，处理异步动作
    effects : {
        *ADD(action,{put}){
            // 延迟一秒
            yield delay(1000);
            // 触发同步的ADD_函数
            yield put({"type":"ADD_"});
        }
    }
}
// 自定义一个延迟器
const delay = (ms) =>new Promise(res=>setTimeout(res,ms));

运行计数器

dva计数器.gif