>
primasaja.com : solusi komputer prima
Email: jakaprima123@gmail.com
Phone: 081311086653
Fax: -
Url:
cash, credit card
Perum Griya Rajeg Lestari Blok C No 24
Tangerang, indonesia 15540
Artikel Pilihan

Gerakan Donasi / Kerjasama

Segala penulisan yang dibuat dalam website primasaja.com ini dilakukan secara gratis tanpa dipungut biaya
namun untuk keinginan perkembangan lebih lanjut dari website ini dan keberadaan website ini untuk memberikan konstribusi kepada semua pembaca
kami merencanakan kegiatan donasi ini, dengan kategori sebagai berikut:
Donasi Penulisan
Bagi Anda yang ingin menjadi penulis pada website primasaja.com secara sukarela ataupun untuk tujuan pekerjaan silahkan hubungi admin melalui email jaka@primasaja.com untuk info lebih lanjut.
Donasi keuangan
Bagi Anda yang ingin memberikan suntikan dana kepada kami secara sukarela maupun keperluan kerjasama, Kami sangat terbuka untuk kegiatan ini. Silahkan hubungi kami melalui nomor kontak 0813-9807-9895 ataupun melalui email jaka@primasaja.com. Bagi pengirim donasi ke rekening mandiri dengan No Rekening yang saya kirim via email atas nama jaka prima maulana
Donasi Kritik dan Saran
Kami terbuka luas, kritik dan saran anda mengenai pengembangan website kami baik ide, gagasan mengenai website kami. silahkan beri komentar pada email maupun setiap postingan artikel kami

Minggu, 28 Mei 2017

Tutorial Redux Latihan dengan Input Data dan Update State

Tidak ada komentar : Diposting oleh prima di 21.13 Label: ,
Jaka Prima Maulana

Artikel Berepisode
  1. Dasar Redux
Selamat datang pengunjung 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>
Selengkapnya..

Tutorial Redux Store State Reducer Action Dispatch Subcribe (update state)

Tidak ada komentar : Diposting oleh prima di 20.37 Label: ,
Jaka Prima Maulana

Artikel Berepisode
  1. Dasar Redux
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>



Selengkapnya..

Tutorial Redux Store State Reducer Action Dispatch (definisikan default state)

Tidak ada komentar : Diposting oleh prima di 10.48 Label: ,
Jaka Prima Maulana

Artikel Berepisode
  1. Dasar Redux
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>











Selengkapnya..

Tutorial Redux Dasar Redux Normal Javascript

Tidak ada komentar : Diposting oleh prima di 09.41 Label: ,
Jaka Prima Maulana

Artikel Berepisode
  1. Dasar Redux
Selamat datang pengunjung www.primasaja.com,

pada tutorial kali ini kita akan membahas mengenai " Tutorial Redux Dasar Redux Normal Javascript ", sebelum masuk kedalam redux admin membuat contoh dasar normal javascript yang biasa dipakai

seperti berikut:

 <!DOCTYPE html>
 <html>
 <head>
   <title>Tutorial Redux Dasar Redux Normal Javascript</title>
 </head>
 <body>
  <div>
    <p>
      DKLIK sebanyak: <span id="value">?</span> kali
      <button id="decrement">decrement</button>
      <button id="increment">increment</button>
    </p>
  </div>
  <script type="text/javascript">

    var valueElement = document.getElementById('value');
    function render(){
      valueElement.innerHTML = 0;
    }
    render();

    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>

dari javascript dasar berikut kita akan membuat redux agar dapat di prediksi, manage dan di maintenance lebih mudah statenya. lanjut ke tutorial selanjutnya


Selengkapnya..
Langganan: Postingan ( Atom )

twitter tumblr linkedin pinterest google+

© Primasaja.com : PRIme Management Software Architecture with JAka 2014 . Powered by Design Template Primasaja and BD Black Design Primasaja.com