基于ES5的原生Redux API，实现原生版Counter
先看效果
当点击 + 时，数值加1
当点击 - 时，数值减1
当点击 Increment if odd 时，会判断当前 store 里面的 state 是否不为偶数，当不为偶数则加1，否则没有效果
第一次点击，没效果
当加到1时候， 再次点击，则加1
当点击 Increment async 时，异步执行，定时器，执行一次 一秒后加1
代码示例
<!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>