Minggu, 28 Mei 2017
Tutorial Redux Latihan dengan Input Data dan Update State
Jaka Prima Maulana
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,
pada tutorial kali ini kita akan membuat ulang dari hasil teori dan praktek yang sudah di bahas pada artikel sebelumnya, dengan membuat fungsi penjumlahan dimana ada inputan 1 dan 2 yang menghasilkan state hasil.
berikut adalah hasil codenya dengan bold yang menjadi fokus penambahan latihan sesuai judul kita ini
<!DOCTYPE html>
<html>
<head>
<title>redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
di klik sebanyak: <span id="value">?</span> berapa kali
<button id="decrement">decrement</button>
<button id="increment">increment</button>
</p>
</div>
<div>
penjumlahan
<input type="number" name="input1" id="input1">
<input type="number" name="input2" id="input2">
=
<span id="hasil"></span>
<button id="tombolJumlah">jumlahkan</button>
</div>
<script type="text/javascript">
var store = Redux.createStore(reducerFunction);
var valueElement = document.getElementById('value');
var valueHasil = document.getElementById('hasil');
function render(){
valueElement.innerHTML = store.getState().object1;
valueHasil.innerHTML = store.getState().propObjHasil;
}
render();
store.subscribe(render);
function reducerFunction(stateSaatIni, aksi){
var stateAwal = {object1: 0, propObjHasil: 0};
var stateSelanjutnya = Object.assign({}, stateSaatIni);
if (stateSaatIni === undefined){
stateSelanjutnya = stateAwal;
return stateSelanjutnya;
}
switch (aksi.type){
case 'decrement':
stateSelanjutnya.object1 = stateSaatIni.object1 - 1;
return stateSelanjutnya;
case 'increment':
stateSelanjutnya.object1 = stateSaatIni.object1 + 1;
return stateSelanjutnya;
case 'menjumlahkan':
stateSelanjutnya.propObjHasil = parseInt(aksi.input1) + parseInt(aksi.input2);
return stateSelanjutnya;
default:
return stateSelanjutnya;
}
}
document.getElementById('decrement').addEventListener('click', function(){
var aksi = {type: 'decrement'};
store.dispatch(aksi);
});
document.getElementById('increment').addEventListener('click', function(){
setTimeout(
function increment(){
var aksi = {type: 'increment'};
store.dispatch(aksi);
}, 1000
);
});
document.getElementById('tombolJumlah').addEventListener('click',function(){
var a = document.getElementById('input1').value;
var b = document.getElementById('input2').value;
var aksi = {type: 'menjumlahkan', input1: a, input2: b};
store.dispatch(aksi);
});
</script>
</body>
</html>
Topik menarik sejenis yang mungkin anda cari:
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar