前言： 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
