မကြာခင် MERN Stack Course Launch လုပ်တော့မှာဖြစ်ပါတယ်။

2
998

Basic Redux Code

Myo Thant Kyaw

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>


Comment:
Please Login To Create Comment Login
Loading...
Hein Wai Yan Htet 2020 1 year ago .........
Hein Wai Yan Htet 2020 1 year ago Hello SAN kYI TAR PAR jUST TESTING