Redux用法简单示意
2019-01-08 本文已影响0人
我也不知道啊丶
Redux用法简单示意
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Redux-01</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>
<script>
function add1(){
store.dispatch({type:'add',payload:1})
}
function add2(){
store.dispatch({type:'add',payload:2})
}
function minus(){
store.dispatch({type:'minus',payload:1})
}
function add1IFodd(){
let oldState = store.getState()
if(oldState%2 === 1){
store.dispatch({type:'add1IFodd',payload:1})
}
}
function add1After2s(){
setTimeout(() => {
add1()
}, 2000);
}
function render(){
let app = document.querySelector('#app')
app.innerHTML = `
<div>
你点击了 <span id='value'>${store.getState()}</span> 次
<div>
<button id='add1' onClick='add1()'>+1</button>
<button id='add2' onClick='add2()'>+2</button>
<button id='minus1' onClick='minus()'>-1</button>
<button id='add1IFodd' onClick='add1IFodd()'>如果是单数就+1</button>
<button id='add1After2s' onClick='add1After2s()'>两秒钟后+1</button>
</div>
</div>
`
}
function counter(state, action) {
if (typeof state === 'undefined') {
return 0
}
switch (action.type) {
case 'add':
return state + action.payload
case 'minus':
return state - action.payload
case 'add1IFodd':
return state + action.payload
default:
return state
}
}
var store = Redux.createStore(counter)
render(store)
store.subscribe(()=>{
render(store)
})
</script>
</html>
