Redux - example

by kenji morita

HTML

<div>
    <p>
        Clicked: <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 src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
<script>
		//reducer stateとactionを受け取りaction.typeによって状態を変えた新しいオブジェクトを返す。storeに渡す
    
    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
        }
    }
		//Store　reducerを受け取り状態が変わったら発火
    var store = Redux.createStore(counter)
    //root
    var valueEl = document.getElementById('value')
		
    //render
    function render() {
        valueEl.innerHTML = store.getState().toString()
    }
		
    //初期描画
    render()
    
    //購読 storeが変わったらrenderされるように
    store.subscribe(render)

		//action
    document.getElementById('increment')
            .addEventListener('click', function () {
            		//実際はdispatchにactionCreaterによって返されたオブジェクトを渡す
                store.dispatch({ type: 'INCREMENT' })
            })

    document.getElementById('decrement')
            .addEventListener('click', function () {
                store.dispatch({ type: 'DECREMENT' })
            })

    document.getElementById('incrementIfOdd')
            .addEventListener('click', function () {
                if (store.getState() % 2 !== 0) {
                    store.dispatch({ type: 'INCREMENT' })
                }
            })

    document.getElementById('incrementAsync')
            .addEventListener('click', function () {
                setTimeout(function () {
                    store.dispatch({ type: 'INCREMENT' })
                }, 1000)
           ...