前言： Dva 相比于 redux ，是非常的好用，不用過(guò)多的配置就能輕松上手，肯定是未來(lái)的大主流，但是現(xiàn)在可沒(méi)多少公司用它，為什么那？很簡(jiǎn)單因?yàn)?Dva 內(nèi)部集成了不少東西，例如：redux ，redux-saga 等等，我們無(wú)法指定它的版本，這是它現(xiàn)在不被大規(guī)模采用，甚至取代 redux 的根本原因。

現(xiàn)在我們來(lái)實(shí)現(xiàn)一個(gè)延時(shí)計(jì)數(shù)器：

一、文件目錄

文件目錄

• main.js

// 引入react翻譯JS小語(yǔ)法
import React from "react";

// 引入dva
import Dva from "dva";
// 引入APP組件
import App from "./App";
//  dva的主要配置
import count from "./count";
// 創(chuàng)建應(yīng)用
const app = Dva();
// 注冊(cè) Model
app.model(count);
// 注冊(cè)視圖
app.router(()=><App/>);
// 啟動(dòng)應(yīng)用
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命令必須的加命名空間再寫(xiě)命令
                    this.props.dispatch({"type":"count/ADD"})
                }}>我們趁風(fēng)使柁</button>
            </div>
        )
    }
}

• count.js

export default {
    // namespace: 當(dāng)前 Model 的名稱。
    namespace : "count",
    // 數(shù)據(jù)存儲(chǔ)的地方
    state : {
        a : 200
    },
    //  Action 處理器，處理同步動(dòng)作
    reducers : {
        // 同步監(jiān)聽(tīng)
        ADD_(state,action){
            return {
                ...state,
                a : state.a + 19
            }
        }
    },
    //   Action 處理器，處理異步動(dòng)作
    effects : {
        *ADD(action,{put}){
            // 延遲一秒
            yield delay(1000);
            // 觸發(fā)同步的ADD_函數(shù)
            yield put({"type":"ADD_"});
        }
    }
}
// 自定義一個(gè)延遲器
const delay = (ms) =>new Promise(res=>setTimeout(res,ms));

運(yùn)行計(jì)數(shù)器

dva計(jì)數(shù)器.gif