Minggu, 28 Mei 2017
Tutorial Redux Store State Reducer Action Dispatch Subcribe (update state)
Jaka Prima Maulana
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,pada tutorial kali ini kita akan membahas mengenai " Tutorial Redux Store State Reducer Action Dispatch (update state) " pada tutorial sebelumnya kita telah membahas hal tersebut namun hanya sebatas menjawab bagaimana mendefinisikan default state.
pada tutorial kali ini akan di jelaskan untuk menjawab bagaimana mengupdate state, script sebelumnya bisa dilihat di tutorial sebelumnya disini.
sebelum kita memulai ada baiknya kita pahami dahulu teori tentang store, dispatch, dan subcribe
Dispatch
dispatch adalah member dari store dengan script berikut store.dispatch(object) yang berisikan object yang di passkan ke reducer, dispatch ini adalah jawaban untuk bagaimana caranya update state
Subcribe
subscribe adalah member dari store yang berfungsi untuk merender ulang hasil dari pengolahan state ke innerhtml
berikut contoh hasil coding update state :
<!DOCTYPE html>
<html>
<head>
<title>reduc 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>
<script type="text/javascript">
var store = Redux.createStore(reducerFunction); // STORE
var valueElement = document.getElementById('value');
function render(){
valueElement.innerHTML = store.getState().object1; // STATE
}
render();
store.subscribe(render); //SUBSCRIBE
function reducerFunction(stateSaatIni, aksi){ // REDUCER
var stateAwal = {object1: 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;
default:
return stateSelanjutnya;
}
}
document.getElementById('decrement').addEventListener('click', function(){
var aksi = {type: 'decrement'};
store.dispatch(aksi); // DISPATCH
});
document.getElementById('increment').addEventListener('click', function(){
setTimeout(
function increment(){
valueElement.innerHTML = parseInt(valueElement.innerHTML) + 1;
}, 1000
);
});
</script>
</body>
</html>
Topik menarik sejenis yang mungkin anda cari:
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar