Redux အတွက် အလွယ်ကူဆုံးcode လေးရေးပေးလိုက်ပါတယ်

html file ဆောက်ပီး paste လုပ်ပီး run ကြည့်ပါ

နောက်မှ short course လေးလုပ်ပေးပါမယ်။

<div id="counter"></div>
<button id="dec">-</button>
<button id="inc">+</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/5.0.0-alpha.0/redux.min.js"></script>

<script>
    var counter = document.getElementById('counter')
    var btnInc = document.getElementById('inc')
    var btnDec = document.getElementById('dec')

    const initialState = { counter: 0 };

    /*
    Reducer က state  တွေကိုပြောင်းလဲမှုလုပ်ပေးမဲ့ function 
    တွေဖြစ်ပါတယ်။
    */
    const counterReducer = (state = initialState, action) => {//action must be object {type:'increment'}

        switch (action.type) {
            case 'increment':
                return {
                    ...state,
                    counter: state.counter + 1
                }
                break;
            case 'decrement':
                return {
                    ...state,
                    counter: state.counter - 1
                }
                break;
            default:
                return state;
                break;
        }

    }


    /*
    redux ရဲ့ main store ကို fire လုပ်ပေးမဲ့ function ပါ
    state ကိုယူဖို့
    state ကို ပြင်ဖို့အတွက် store မှာ object တွေ ကိုထုတ်ပေးထားပါတယ်။
    */
    const store = Redux.createStore(counterReducer)//need reducer
    const render = () => {
        const state = store.getState();
        counter.innerHTML = state.counter;
    }
    render();


    /*
    + ကိုနှိပ်ရင် state ကိုပြင်ဖို့လိုပါတယ်။
    state ကို ပြင်ဖို့ action ကို dispatch လုပ်ပီးပြင်ရပါမယ်
    action ကို reducer ကစစ်ဆေးမှုလုပ်ပေးပီး main state ကိုပြင်ပေးပါလိမ့်မယ်။

    */
    btnDec.addEventListener('click', () => {
        store.dispatch({ type: 'decrement' });
        render();
    })
    btnInc.addEventListener('click', () => {
        store.dispatch({ type: 'increment' })
        render();
    })

</script>