Based on ES5's native Redux API, implement the native version of Counter
Look at the effect first
When you click +, the value will increase by 1
When-is clicked, the value is reduced by 1
When you click Increment if odd, it will judge whether the state in the current store is not an even number, if it is not an even number, add 1 to it, otherwise it will have no effect
The first click, no effect
When it is added to 1, click it again, then add 1.
When click Increment async, it will execute asynchronously, and the timer will execute once and add 1 after one second.
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Redux basic example</title>
<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
Click: <span id="value">0</span> times
<button id="increment">+</button>
<button id="decrement">-</button>
<button id="incrementIfOdd">Increment if odd</button>
<button id="incrementAsync">Increment async</button>
</p>
</div>
<script>
// reducer
function counter(state, action) {
if(typeof state === 'undefined') {
return 0
}
switch(action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 创建 Redux store 来存放应用的状态
var store = Redux.createStore(counter)
// 获取dom元素
var valueEl = document.getElementById('value')
// 把store里面的state状态作为值赋值到dom元素中（即页面显示）
function render() {
valueEl.innerHTML = store.getState().toString()
}
render()
// 添加一个变化监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。
store.subscribe(render)
document.getElementById('increment')
.addEventListener('click', function() {
store.dispatch({
type: 'INCREMENT' })
})
document.getElementById('decrement')
.addEventListener('click', function() {
store.dispatch({
type: 'DECREMENT' })
})
document.getElementById('incrementIfOdd')
.addEventListener('click', function() {
console.log(store.getState());
if(store.getState() % 2 !== 0) {
store.dispatch({
type: 'INCREMENT' })
}
})
document.getElementById('incrementAsync')
.addEventListener('click', function() {
setTimeout(function () {
store.dispatch({
type: 'INCREMENT' })
}, 1000)
})
</script>
</body>
</html>