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 Subcribe update state

tidak ada komentar : DIPOSTING OLEH jaka Pada 2017 LABEL: react

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>


Tidak Ada Komentar: