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 Latihan dengan Input Data dan Update State

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

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>


Tidak Ada Komentar: