Minggu, 28 Mei 2017
Tutorial Redux Store State Reducer Action Dispatch (definisikan default state)
Jaka Prima Maulana
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,
Pada tutorial sebelumnya telah dibuat Javascript murni yang di jadikan contoh, lalu dalam penggunaan redux library sekarang masuk dalam teori penting yang harus selalu diingat kunci penting dalam penggunaan redux yaitu Store State Reducer Action dan Dispatch
State
State adalah sebuah object yang akan di manage oleh Store, state berisi object yang terdapat value untuk ditampilkan ke plain javascript .innerHtml : store.getState()
Store
store adalah fungsi library redux yang berisi parameter reducer untuk mengolah state : Redux.createStore(function reducer);
Hubungan State dan Store
state digunakan untuk mengambil data state dari store hasil olahan reducer yang mengembalikan nilai state. sedangkan store digunakan untuk membuat store yang berisikan parameter reducer
Reducer
reducer adalah sebuah function yang berisi parameter state saat ini dan action. function ini yang digunakan untuk menentukan nilai value state awal dan proses perubahan state
Hubungan Store dan Reducer
ketika store pertama kali dipanggil maka reducer akan dijalankan dan state akan berstatus undefined karena belum didefinisikan nilainya, maka di dalam reducer tersebut akan didefinisikan state awalnya
berikut hasil script dari teoritis diatas
<!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>
CLICKED: <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);
var valueElement = document.getElementById('value');
function render(){
valueElement.innerHTML = store.getState().object1;
}
render();
function reducerFunction(stateSaatIni, Action){
var stateAwal = {object1: 0};
var stateSelanjutnya = Object.assign({}, stateSaatIni);
if (stateSaatIni === undefined){
stateSelanjutnya = stateAwal;
return stateSelanjutnya;
}
}
document.getElementById('decrement').addEventListener('click', function(){
valueElement.innerHTML = parseInt(valueElement.innerHTML)- 1;
});
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