← Back to postsApa itu Redux ? Prinsip Kerja, Kelebihan dan Kekurangan

Apa itu Redux ? Prinsip Kerja, Kelebihan dan Kekurangan

Redux adalah library javascript open source yang berfungsi untuk mengelola atau memperbaruhi data state pada suatu aplikasi terinspirasi dari Flux Pattern. Library javascript ini bekerja dengan cara memusatkan data untuk digunakan di seluruh aplikasi.

Terdapat aturan yang ditetapkan oleh Redux untuk memperbarui suatu data pada state, yaitu sistem satu arah (unidirectional). Dari aturan tersebut, terbentuklah pola arsitektur yang konsisten dalam mengelola data state, sehingga debugging jadi lebih mudah terutama pada aplikasi yang butuh perhatian ekstra soal aliran data.

Pada dasarnya, Redux memiliki kemampuan untuk dapat diintegrasikan dengan framework javascript apapun. Tapi karena penciptanya juga merupakan top contributor React, maka library ini populer pada ekosistem React. Mereka adalah Dan Abramov, dan Andrew Clark.

Mengapa Redux Penting ?

Dalam pengembangan aplikasi berbasis javascript, khususnya jika menggunakan React, state manajemen bisa menjadi komplek ketika suatu user interface memiliki komponen yang menjadikan satu sumber data untuk dijadikan acuan perubahan tampilan.

Contoh, sesimpel memilih tema dark mode dan light mode. Apalagi jika aplikasinya tumbuh semakin besar. Apalagi jika aplikasinya tumbuh semakin besar. Redux menawarkan konsep “single of truth” dimana seluruh data state aplikasi akan dikendalikan melalui penyimpanan data yang disebut store secara terpusat.

Hal ini akan memudahkan para developer javascript untuk:

  1. Melacak dan mengelola State: Redux mampu meminimalisir problem debugging saat data state tersebar dan dikonsumsi di banyak komponen
  2. Pediktabilitas: Dengan pola aliran unidirectional, aliran data akan mudah terprediksi kemana alurnya.
  3. Debugging lebih mudah: Redux memiliki dev tools yang dirancang khusus bernama “Redux DevTools” untuk memungkinkan para developer mengetahui time frame perubahan state pada suatu komponen.

Apa bedanya dengan React-Redux ?

React-Redux adalah library javascript yang bertugas untuk binding library atau pihak perantara yang menghubungkan fungsi Redux pada aplikasi React agar Redux bisa secara mudah diterapkan pada aplikasi React.

Sederhananya, React-Redux berperan sebagai "jembatan" yang menghubungkan komponen-komponen React dengan store Redux secara mudah dan efisien dengan berbagai hooks React yang mendukung (useSelector, useDispatch, Provider).

Apa bedanya dengan useContext kombinasi useReducer ?

Dalam konteks aplikasi React, tujuannya sama yaitu untuk menghindari props drilling. Meski memiliki tujuan yang sama, keduanya memiliki perbedaan mendasar dari segi fitur yang mendukungnya.

Redux memiliki developer tools dengan kemampuan time travel secara historikal. Riwayat perubahan tampilan akibat perubahan data state dapat dengan mudah dicari sumbernya.

Selain itu perbedaan mendasar lainnya adalah React context dan useReducer hanya bisa digunakan pada aplikasi berbasis React, sedangkan Redux bisa digunakan di library javascript selain React.

Mengapa Redux dianggap Penting bagi React ?

Pengelolaan state komponen React akan menjadi kompleks ketika aplikasi tumbuh seiring bertambahnya fitur. Redux menawarkan konsep “single source of truth” dimana seluruh state aplikasi akan dikendalikan melalui state terpusat yang disimpan pada store.

Hal ini akan memudahkan ketika kita membuat aplikasi dimana komponen satu sama lain yang sudah sangat kompleks, tampilan bisa tetap sinkron melalui data yang terpusat. Selain itu Redux

Prinsip Redux

Single source of truth

Dalam Redux, seluruh data state akan disimpan pada satu object yang bersifat global yang disebut dengan store. Dengan mengumpulkan seluruh state di satu tempat, pelacakan perubahan data akan terasa jadi lebih mudah

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

State is read-only.

Prinsip kerja Redux mengharuskan data state untuk tidak diubah secara langsung. 

state.counter += 1; ❌
return state;

satu-satunya cara untuk mengubah data state adalah dengan mengirimkan sebuah action. Action adalah object javascript sederhana yang mendeskripsikan apa yang terjadi

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

Perubahan dibuat dengan pure function

Dalam menentukan bagaimana bentuk atau data state baru, kita harus mengguanakan reducer. Reducer adalah fungsi javascript murni / pure function yang mengolah data yang dikirim dari sinyal action untuk kemudian dikembalikan menjadi bentuk / data state baru selanjutnya.

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)

Perubahan bentuk dengan tetap memegang prinsisp state is read only. Kita harus membuat salinan baru untuk pembaruhan data state yang ditentukan.

return {
  ...state,
  text: action.text ✅
};

Dengan menerapkan prinsip immutablility akan membantu mencegah terjadinya bug akibat ketidak konsistenan data yang tidak disengaja

Sumber: https://redux.js.org/understanding/thinking-in-redux/three-principles

Konsep Dasar React Redux

Store:

Store Merupakan sumber data tunggal yang menyimpan seluruh state aplikasi dimana store memastikan setiap komponen dapat mengakses informasi dari satu tempat.

const store = createStore(reducerFn);

State dan Action:

State adalah representasi data pada suatu aplikasi dimana jika kita membuat aplikasi React, state adalah acuan utama bagaimana tampilan akan berubah

Action adalah objek sederhana yang mendeskripsikan perubahan apa yang ingin dilakukan pada state.

const ACTION = { type: 'INCREMENT' }

Reducer:

Reducer adalah pure function dimana reducer akan menerima state dan action untuk menghasilkan state baru. Reducer Harus merupakan pure function yang tidak mengubah state secara langsung (immutability).

const reducerFn = (state = { value: 0 }, action) => {
    switch(action.type) {
        case 'INCREMENT':
            return {value: state.value + 1};
        case 'DECREMENT':
            return {value: state.value - 1};
        default:
            return state;
    }
}

Dispatch dan Alur Data (Flow Data):

Dispatch mengirimkan action ke store, yang kemudian diteruskan ke reducer untuk memperbarui state. Contoh: akan memicu reducer untuk menambah nilai yang sesuai pada pengkondisian di reducer.

Kelemahan Redux

Dibalik banyaknya fitur yang ditawarkan Redux terdapat trade off atau kelemahan maupun keter

batasan yang ada pada library Redux.

Boilerplate yang banyak

Salah satu kesan banyak developer terhadap Redux adalah, banyaknya boilerplate atau kode yang dibutuhkan untuk menambahkan sebuah event trigger seperti kita harus menuliskan action type, action creator, reducer, setup store dll. Hal ini merupakan usaha yang harus dibayar agar Redux dev tools bisa berjalan. Meskipun tujuan utamanya adalah agar flow data terprediksi, namun kegiatan ini bisa jadi terasa sangat rumit dan boros.

Kurva belajar yang curam

React developer yang baru mempelajari React sering kali dihadapkan untuk instruksi mempelajari Redux jika belajar React. Dengan kondisi programmer pemula yang baru mengenal konsep manajemen state berbais pattern Flux, Redux bisa jadi terasa amat sulit. Kita harus memahami banyak prinsip untuk tujuan yang ingin kita capai.

Fleksibilitas data yang berkurang

Kelemahan lain dari Redux adalah perubahan data menjadi tidak fleksibel. Ini merupakan trade off dari library yang menawarkan kemudahan dalam memprediksi berubahnya alur data. Sejak prosedurnya yang harus mengikuti flux pattern, fleksibilitas alur data harus berkurang.

Kesimpulan

Redux adalah library JavaScript open source yang memusatkan pengelolaan state aplikasi dengan alur data satu arah, sehingga memudahkan debugging dan memprediksi perubahan data. Seluruh state disimpan dalam satu store, diubah melalui dispatch action, dan diproses oleh reducer sebagai pure function. Dalam ekosistem React, integrasi dengan React-Redux mempermudah komunikasi antara komponen dan store. Dibandingkan useContext dan useReducer, Redux menawarkan pengelolaan state yang lebih kuat, dilengkapi developer tools, serta dapat digunakan di luar React. Meskipun membutuhkan boilerplate yang lebih banyak dan kurva belajar yang lebih tinggi, Redux tetap andal untuk aplikasi berskala besar yang mengutamakan konsistensi, keteraturan, dan keterlacakan alur data.