Primasaja.com: Service WEB, MOBILE & SOFTWARE DEVELOPMENT , ENGINEERING & ARCHITECTURE , DESIGN & CREATIVE , ADMIN SUPPORT , SALES & MARKETING , INSTALASI JARINGAN & KOMPUTER
Email: jakaprima123@gmail.com
Phone: 081311086653
Fax: -
Url:
cash, credit card
Perum Griya Rajeg Lestari Blok C No 24
Tangerang indonesia 15540

Tutorial Redux Store State Reducer Action Dispatch definisikan default state

0
jaka
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>







Tidak Ada Komentar: