SOURCE

console 命令行工具 X clear

                    
>
console
function add1() {
    store.dispatch({ type: 'add' ,payload:1})
}
function add2() {
    store.dispatch({ type: 'add',payload:2 })
}
function addIf(){
    var oldState = store.getState()
    if(oldState % 2 === 1){
        store.dispatch({type:'add',payload:1})
    }
}
function addAsync(){
    setTimeout(() =>{
        store.dispatch({type:'add',payload:1})
    },2000)
}


function render(sto) {
    var app = document.querySelector('#app')
    app.innerHTML = `
        <div>
            你点击了<span id="valye">${store.getState()}</span>次
	        <div>
		        <button id="add1" onclick="add1()">+1</button>
                <button id="add1" onclick="add2()">+2</button>
		        <button id="minus1">-1</button>
		        <button id="add1IfOdd" onclick="addIf()">如果是单数就+1</button>
                <button id="add1AfterSec" onclick="addAsync()">2秒钟后+1</button>
	        </div>
        </div>
    `
}

function stateChanger(state,action){
    if(state === undefined ){
        return 0
    }else{
        if(action.type === 'add'){
            var newState = state +action.payload
            return newState   //根据操作生成新的state触发一个事件
        }else{
            return state
        }
    }
}

var store = Redux.createStore(stateChanger)

render(store)
store.subscribe(() =>{
    render(store)
})
<script src="https://cdn.bootcss.com/react/16.8.6/umd/react.production.min.js"></script>
  <script src="https://v/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>
<div id="app">

</div>