中文文档：www.axios-js.com/zh-cn/docs/
代码地址：js.jirengu.com/kopot/28/ed…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/redux/4.0.4/redux.min.js"></script>
<script>
function add1(){
store.dispatch({type:"add",payload: 1}) // 派发事件，参数其实就是fn里的action
}
function add2(){
store.dispatch({type:"add",payload: 2})
}
function addIf(){
if(store.getState() % 2 === 1){
store.dispatch({type:"add", payload: 1})
}
}
function addAsync(){
setTimeout(()=>{
store.dispatch({type:"add", payload: 2})
}, 2000)
}
function addAsync2(){// 错误示范
store.dispatch({type:"addError", payload: 2})
}
function render(store){
const app = document.querySelector("#app")
app.innerHTML = `
<div>
<h3>${store.getState()}</h3>
<button onclick="add1()">+1</button>
<button onclick="add2()">+2</button>
<button onclick="addIf()">单数就+1</button>
<button onclick="addAsync()">两秒后+2</button>
<button onclick="addAsync2()">错误异步示范</button>
</div>`
}
const store = Redux.createStore(fn) // 将状态存储到store中
function fn(state, action){// 用来更新状态，包括初始化状态，它的返回值就是状态
state = state || 0
switch(action.type){
case "add":
return state + action.payload
case "addError":
setTimeout(()=>{// 在这里执行异步操作，没有返回值，会流向default
return state + action.payload
})
default:
console.log("default")
return state
}
}
render(store)
store.subscribe(()=>{ // 监听到store的变化，就要重新render
render(store)
})
</script>
</body>
</html>
