Mengenal Redux Dengan Sederhana

Redux adalah sebuah state management yang biasa dipakai untuk aplikasi javascript seluruh state dalam aplikasi disimpan dalam suatu bentuk object di dalam store (redux store).

Satu-satunya cara untuk merubah state adalah dengan memanggil / menggunakan action. Action sendiri merupakan object yang mendeskripsikan suatu informasi yang dikirimkan ke store.

Simple story

Misalkan kamu mau ke ATM bertujuan untuk mengambil uang. Setelah kamu sampai ke ATM, kamu memasukkan perintah agar mesin ATM mengeluarkan uang sesuai dengan yang diinginkan. Maka ATM akan mengecek apakah saldo yang ingin diambil sesuai dengan saldo yang ada di rekening bank. Jika sesuai maka uang akan keluar.

Disini, tujuanmu ke ATM bertindak sebagai action, yang jika diterapkan di redux akan direpresentasikan sebagai object.

{
  type: 'WITHDRAW',
  amount: 100000,
}

Action memiliki field type sebagai informasi jenis tindakan apa yang nanti akan dilakukan dan dikirim ke store menggunakan store.dispatch(). Setiap perubahan state di dalam redux harus dengan action, dan akan diterima oleh reducer

reducer dalam contoh kasus ini yaitu mesin ATM. Mesin ATM akan mengecek apakah saldo kita cukup untuk diambil. Saldo yang berada di rekening bank ini adalah state dan bank untuk menyimpan uang adalah store.

// ini data rekening bank
state = {
  balance: 120000,
};

// ini reducer
function transaction(state, action) {
  switch (action.type) {
    case "WITHDRAW":
      if (state.balance >= action.amount) {
        return {
          ...state,
          balance: state.balance - action.amount,
        };
      }
      return state;
    case "DEPOSIT":
      return {
        ...state,
        balance: state.balance + action.amount,
      };
    default:
      return state;
  }
}

Seperti kasus saat kita ingin menarik uang, kita tidak bisa langung mengambilnya tanpa melalui ATM. (yaa, kamu bisa pergi ke cabang bank terdekat dan ke teller untuk mengambil uang, teller juga perantara). Perantara antara kamu dan saldo uangmu saat mau mengambilnya itulah reducer.

Mesin ATM atau Teller bank keduanya dibuat sama-sama oleh bank. Sama halnya dengan reducer, yang bertugas menangani reducer adalah store.

const store = createStore(reducer);

Store dan reducer ini akan selalu sinkron. Untuk mengambil nilai state dari store bisa menggunakan

store.getState();

Contoh

Implementasi kasus ini bisa dilihat di repository ATM Vanilla Redux yang menggunakan VanillaJS. Kamu juga bisa mencoba dengan menggunakan library frontend seperti React dengan bantuan library React Redux

Kenapa menggunakan Redux?

Redux memudahkan kita dalam memanajemen state. Pada saat aplikasi sudah bertumbuh besar, kita bisa dengan mudah mengubah state di child child component tanpa harus membuat bantuan dengan props di dalam component di dalam props component (nahlo bingung kan).

Intinya kita bisa mengubah state dalam aplikasi meskipun dari component terjauh dari root component.

Tulisan Dan Abranov You Might Not Need Redux juga bagus untuk dijadikan referensi.

Terima kasih sudah membaca, semoga bermanfaat.