dva-counter
2024-10-11 07:32:05
dva实例Counter。
import dva, { connect } from 'dva';
import { Router, Route } from 'dva/router';
import styles from './index.less';
const app = dva();
function XX() {
this.events = {};
}
XX.prototype.addListener = function(event, listener) {
if(!this.events.hasOwnProperty(event)) {
this.events[event] = listener;
}
}
XX.prototype.trigger = function(event) {
if(this.events.hasOwnProperty(event)) {
(this.events[event])()
}
}
const xx = new XX();
app.model({
namespace: 'count',
state: {
record: 0,
current: 0,
},
reducers: {
add(state) {
const newCurrent = state.current + 1;
return {
...state,
record: newCurrent > state.record ? newCurrent : state.record,
current: newCurrent
}
},
minus(state) {
return {
...state,
current: state.current - 1
};
},
},
subscriptions: {
clickWatcher({dispatch}) {
xx.addListener('click', () => {dispatch({type: 'minus'})})
}
},
effects: {
*add(action, {call, put}) {
yield call(delay, 1000);
yield put({type: 'minus'});
}
}
});
const SubButton = () => {
return (
<button onClick={() => xx.trigger('click')}>subButton</button>
)
}
const CountApp = ({count, dispatch}) => {
return (
<div className={styles.normal}>
<div className={styles.record}>Highest Record: {count.record}</div>
<div className={styles.current}>{count.current}</div>
<div className={styles.button}>
<button onClick={() => { dispatch({type: 'count/add'}); }}>+</button>
</div>
<SubButton />
</div>
)
}
function mapStateToProps(state) {
return {
count: state.count
};
}
const HomePage = connect(mapStateToProps)(CountApp);
app.router(({history}) =>
<Router history={history}>
<Route path="/" component={HomePage} />
</Router>
)
app.start('#root');
// -------------
// Helpers
function delay(timeout) {
return new Promise(resolve => {
setTimeout(resolve, timeout)
})
}
.normal {
width: 200px;
margin: 100px auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 20px #ccc;
}
.record {
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
color: #ccc;
}
.current {
text-align: center;
font-size: 40px;
padding: 40px 0;
}
.button {
text-align: center;
button {
width: 100px;
height: 40px;
background: #aaa;
color: #fff;
}
}
最新文章
- Hadoop之Storm安装
- VC++6.0编译器标记的那些内存值
- 使用Intellij idea开发
- PPP模式下的融资结构优化
- iOS小游戏打地鼠
- nginx作反向代理，实现负载均衡
- ubuntu安装mariadb
- Node.js权威指南 (4) - 模块与npm包管理工具
- android离线下载的相关知识
- nyoj201 作业题
- Ajax 用法, 实现方法,JS原生与JQ实现
- win7 64位andriod开发环境搭建
- lazy ideas in programming(编程中的惰性思想)
- NYoj_49开心的小明
- Part 7：自定义admin站点--Django从入门到精通系列教程
- Spring整合quartz框架实现任务定时调度
- Linux之dmesg命令
- LeetCode【110. 平衡二叉树】
- PopupWindow 以及拍照、裁剪
- Android获取文件夹下的所有子文件名称；