Redux Adalah: Cara Kerja, Redux Toolkit & Alternatifnya

Setiap komponen React memiliki ingatannya sendiri. Anda menyimpannya lewat useState, dan selama data itu hanya dipakai oleh komponen tersebut, semuanya berjalan rapi. Masalah muncul ketika data yang sama dibutuhkan di tempat lain. Keranjang belanja yang diisi di halaman produk harus terbaca di ikon keranjang pada header, sementara keduanya berada di cabang pohon komponen yang berjauhan.

Cara paling sederhana adalah menaikkan data itu ke komponen induk bersama, lalu mengopernya turun lewat props. Sampai dua atau tiga lapis, pendekatan ini masih nyaman. Setelah tujuh lapis, Anda akan menemukan komponen-komponen di tengah yang menerima props hanya untuk meneruskannya, tanpa pernah memakainya sendiri. Kondisi ini punya nama sendiri di kalangan pengembang React: prop drilling. Redux adalah salah satu jawaban paling dikenal untuk persoalan tersebut, dan artikel ini membahas cara kerjanya, bentuk modernnya, serta kapan Anda sebenarnya belum memerlukannya.

Redux Adalah Wadah Data Terpusat untuk Aplikasi JavaScript

Redux adalah pustaka JavaScript yang menyimpan seluruh data aplikasi di satu wadah terpusat, disertai aturan ketat mengenai bagaimana data itu boleh berubah. Data yang dimaksud bukan data permanen seperti isi basis data, melainkan kondisi aplikasi saat sedang berjalan: siapa yang sedang login, apa isi keranjang, filter mana yang aktif, panel mana yang sedang terbuka. Dalam istilah teknisnya, kondisi ini disebut state, dan pustaka yang mengurusnya disebut state management (pengelola state).

Nama Redux sendiri berasal dari bahasa Latin, artinya "dibawa kembali" atau "dipulihkan", dari kata kerja reducere. Dalam bahasa Inggris kata ini berperan sebagai kata sifat yang selalu diletakkan setelah kata benda. Pemilihan namanya bukan kebetulan, karena inti kerja Redux memang ada pada fungsi bernama reducer.

Alur data Redux: kiri tanpa store, props dioper berlapis; kanan dengan store, komponen mengambil langsung.

Ada tiga hal yang sebaiknya diluruskan sejak awal, karena ketiganya sering tertukar:

1. Redux bukan sebuah framework: ia pustaka kecil berukuran 1,4 kB setelah kompresi gzip, tanpa aturan tentang struktur folder atau cara Anda membangun antarmuka.
2. Redux bukan bagian dari React: keduanya proyek terpisah dengan tim pengembang berbeda. Jembatan antara keduanya adalah paket tersendiri bernama React Redux (react-redux).
3. Redux tidak eksklusif untuk React: dokumentasi resminya menyebut tersedia binding untuk Angular, Vue, Mithril, dan lainnya, meskipun pasangan dengan React memang yang paling umum.

Redux dibuat Dan Abramov pada 2015 ketika ia menyiapkan materi presentasi React Europe berjudul "Hot Reloading with Time Travel", dengan Andrew Clark sebagai rekan penulis. Redux merupakan penyederhanaan dari Flux, arsitektur buatan Facebook, dengan membuang komponen Dispatcher dan menggantinya dengan fungsi murni sederhana. Pola pembaruan model dari bahasa pemrograman Elm menjadi inspirasi langsung untuk bentuk reducer-nya.

Empat Bagian yang Membentuk Alur Redux

Redux paling mudah dipahami sebagai satu jalur searah yang selalu dilalui data. Empat bagian berikut adalah pemberhentiannya.

Store adalah wadahnya. Satu aplikasi punya satu store, dan di dalamnya tersimpan seluruh state dalam bentuk satu objek besar. Store juga yang memegang kendali: tidak ada kode lain yang boleh menyentuh isinya secara langsung.

Action adalah laporan tentang sesuatu yang baru saja terjadi. Bentuknya objek biasa yang bisa diubah menjadi JSON, dengan satu field wajib bernama type berisi teks. Contohnya { type: 'keranjang/produkDitambahkan', payload: 42 }. Perhatikan bahwa action melaporkan peristiwa, bukan memerintahkan perubahan.

Reducer adalah fungsi yang menerjemahkan laporan menjadi state baru. Tanda tangannya selalu sama: menerima state lama dan sebuah action, lalu mengembalikan state baru. Reducer wajib berupa pure function (fungsi murni), yaitu fungsi yang hasilnya selalu sama untuk masukan yang sama dan tidak menyentuh apa pun di luar dirinya.

Dispatch adalah satu-satunya pintu masuk. Ketika pengguna menekan tombol, komponen memanggil dispatch(action), dan store meneruskan action itu ke reducer.

Jalur bacanya terpisah dari jalur tulis. Komponen membaca isi store lewat selector, fungsi kecil yang mengambil potongan state tertentu, misalnya jumlah barang di keranjang saja. Dengan begitu komponen hanya dirender ulang ketika potongan yang ia pakai benar-benar berubah.

Alur searah Redux: komponen dispatch action, reducer hitung state baru, store menyimpannya, komponen baca via useSelector.

Tiga Aturan yang Membuat Perubahan Data Bisa Ditebak

Dokumentasi resmi Redux merangkum seluruh rancangannya dalam tiga prinsip. Ketiganya terdengar kaku, tetapi justru pembatasan inilah yang memberi Redux nilainya.

1. Satu sumber kebenaran: seluruh state aplikasi tersimpan dalam satu pohon objek di dalam satu store. Anda tidak perlu menebak versi data mana yang paling mutakhir, karena hanya ada satu.
2. State hanya bisa dibaca: satu-satunya cara mengubahnya adalah mengirim action. Komponen dan callback jaringan tidak boleh menulis langsung ke store, sehingga tidak ada dua bagian aplikasi yang saling menimpa tanpa jejak.
3. Perubahan ditulis dengan fungsi murni: reducer tidak mengubah state lama, melainkan mengembalikan objek baru. State lama tetap utuh di memori.

Aturan ketiga inilah yang membuka kemampuan paling khas Redux. Setiap versi state tersimpan utuh, dan setiap perubahan tercatat sebagai action bernama. Redux DevTools memanfaatkan keduanya untuk menampilkan riwayat perubahan sebagai daftar, lalu memutar ulang aplikasi ke kondisi beberapa langkah sebelumnya. Kemampuan ini dikenal sebagai time travel debugging, dan sangat menolong ketika Anda sedang melacak bug yang hanya muncul setelah urutan aksi tertentu.

Redux DevTools tersedia sebagai ekstensi Chrome dan Firefox. Ketika Anda memakai Redux Toolkit, ekstensi ini aktif otomatis di mode pengembangan tanpa konfigurasi tambahan.

Redux Toolkit: Cara Menulis Redux yang Dipakai Sekarang

Redux versi awal menuntut banyak kode pendukung. Anda menulis konstanta untuk tiap tipe action, fungsi pembuat action, reducer dengan switch, lalu menyatukan semuanya secara manual. Tim Redux menjawab keluhan ini dengan merilis Redux Toolkit, dan sekarang menyebutnya sebagai pendekatan resmi yang mereka rekomendasikan untuk menulis logika Redux.

Perubahan sikap ini bukan sekadar saran. Sejak Redux 5.0 yang rilis pada Desember 2023, fungsi createStore yang selama bertahun-tahun menjadi titik awal sebuah proyek Redux ditandai @deprecated. Penandaan itu murni penanda visual berupa coretan di editor dan tidak melempar error saat dijalankan, tetapi arahnya jelas: pola lama tidak lagi disarankan untuk proyek baru.

Pemasangannya cukup dua paket lewat npm:

npm install @reduxjs/toolkit react-redux

Store dibuat dengan configureStore, yang sudah menyertakan Redux DevTools dan middleware standar tanpa perlu Anda atur:

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

Logika per fitur ditulis dalam satu slice. Satu panggilan createSlice menghasilkan reducer sekaligus action creator-nya, jadi Anda tidak menulis keduanya secara terpisah:

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

Perbandingan kode: Redux lama butuh createStore, konstanta, dan switch; Redux Toolkit cukup createSlice.

Baris state.value += 1 biasanya memicu pertanyaan, karena tampak melanggar aturan bahwa reducer tidak boleh mengubah state lama. Yang terjadi sebenarnya, Redux Toolkit membungkus reducer Anda dengan pustaka Immer. Immer memberikan objek tiruan yang aman diubah, mencatat perubahan yang Anda lakukan, lalu menyusun objek baru di baliknya. Aturan lama tetap berlaku, hanya cara penulisannya yang dipersingkat.

Di sisi komponen, useSelector membaca dan useDispatch mengirim:

const jumlah = useSelector((state) => state.counter.value)
const dispatch = useDispatch()

<button onClick={() => dispatch(increment())}>Tambah</button>

Redux Toolkit juga membawa RTK Query, lapisan pengambil data yang menangani caching, deduplikasi permintaan, dan status loading saat aplikasi berbicara dengan API. Bagi banyak aplikasi, RTK Query menghapus kebutuhan menulis state loading dan error secara manual di tiap layar.

Middleware: Thunk, Saga, dan Persist

Reducer harus tetap murni, sehingga panggilan jaringan dan timer tidak boleh ditaruh di dalamnya. Pekerjaan semacam itu ditangani middleware, yaitu lapisan yang menyela action di antara dispatch dan reducer. Tiga di antaranya paling sering Anda temui.

1. Redux Thunk (redux-thunk): memungkinkan Anda men-dispatch sebuah fungsi, bukan objek. Di dalam fungsi itu Anda bebas memanggil API lalu men-dispatch action hasilnya. Paket ini sudah ikut terpasang otomatis bersama Redux Toolkit, jadi tidak perlu Anda tambahkan sendiri.
2. Redux Saga (redux-saga): menangani alur asinkron rumit memakai generator function, misalnya proses yang harus bisa dibatalkan di tengah jalan atau dicoba ulang beberapa kali. Kemampuannya jauh lebih luas, dengan konsekuensi materi belajar yang lebih berat.
3. Redux Persist (redux-persist): menyimpan isi store ke localStorage dan memulihkannya saat halaman dimuat ulang, berguna untuk keranjang belanja atau preferensi tampilan.

Panduan praktisnya sederhana. Mulailah dengan thunk bawaan, karena untuk sekitar sembilan dari sepuluh kebutuhan pengambilan data, thunk sudah memadai. Pertimbangkan saga hanya ketika Anda benar-benar butuh membatalkan atau mengatur urutan proses asinkron yang saling bergantung.

Kelebihan Redux

1. Satu sumber data untuk seluruh aplikasi: komponen mana pun bisa membaca state yang sama tanpa mengoper props berlapis-lapis.
2. Riwayat perubahan yang bisa ditelusuri: setiap perubahan punya nama dan urutan, sehingga pertanyaan "kenapa nilainya jadi begini" dapat dijawab dengan melihat daftar action.
3. Logika terpisah dari tampilan: reducer adalah fungsi murni yang menerima dua argumen dan mengembalikan satu nilai, sehingga bisa diuji tanpa merender komponen apa pun.
4. Ekosistem yang matang: setelah sepuluh tahun, hampir setiap persoalan umum sudah punya pustaka pendamping, mulai dari penyimpanan lokal sampai undo-redo.
5. Pola yang seragam antar-anggota tim: pada proyek dengan banyak pengembang, keseragaman "semua perubahan lewat action" menghemat waktu yang biasanya habis untuk berdebat soal struktur.

Kelemahan Redux dan Kapan Anda Belum Membutuhkannya

Nilai Redux datang dari pembatasan, dan pembatasan selalu ada harganya.

1. Kode tambahan yang harus ditulis: menambah satu field state berarti menyentuh slice, action, dan komponen. Redux Toolkit memangkas porsinya secara signifikan, tetapi tidak menghilangkannya.
2. Konsep yang harus dikuasai lebih dulu: fungsi murni, immutability, dan aliran data searah bukan materi yang bisa dilewati. Pengembang yang baru belajar React akan menanggung dua kurva belajar sekaligus.
3. Tambahan ukuran unduhan: Redux Toolkit menambah sekitar 13,6 kB setelah kompresi gzip, karena ikut membawa Immer, Reselect, dan redux-thunk. Untuk aplikasi kecil, angka ini terasa besar dibanding manfaatnya.
4. Risiko dipakai berlebihan: memindahkan seluruh state ke store, termasuk isi form dan status modal, justru membuat aplikasi lebih sulit diikuti daripada sebelum memakai Redux.

Soal kapan sebaiknya dipakai, tim Redux sendiri memberi jawaban paling tegas. FAQ resminya menyatakan tidak semua aplikasi membutuhkan Redux, dan menyarankan pemula menguasai React lebih dulu sebelum menyentuhnya. Dan Abramov, yang membuat Redux, dikutip di halaman yang sama: jangan pakai Redux sampai Anda benar-benar bermasalah dengan React polos.

Ambang praktis yang bisa Anda pegang: pertimbangkan Redux ketika ada minimal tiga potong state yang dipakai bersama oleh lebih dari lima komponen di cabang berbeda, dan state itu berubah cukup sering. Di bawah angka tersebut, kombinasi useState dan Context bawaan React biasanya sudah cukup.

Redux vs Zustand, Context API, dan Jotai

Context API sering disebut sebagai pengganti Redux, padahal keduanya menyelesaikan setengah masalah yang berbeda. Context memindahkan data menembus pohon komponen tanpa props, tetapi tidak mengatur bagaimana data itu berubah. Dokumentasi React menganjurkan memadukannya dengan useReducer, dan pola itu memadai sampai titik tertentu. Yang tidak diberikannya adalah middleware, DevTools dengan time travel, serta optimasi render saat satu potong state berubah sangat sering.

Berikut posisi masing-masing berdasarkan data npm dan Bundlephobia per Agustus 2026:

Angka Zustand yang melampaui Redux perlu dibaca dengan hati-hati. Paket redux ikut terunduh setiap kali seseorang memasang Redux Toolkit atau react-redux, karena keduanya menjadikannya dependensi. Perbandingannya karena itu bukan setara. Yang bisa disimpulkan dengan aman: Zustand kini berada di kelas yang sama dengan Redux, sesuatu yang belum terjadi lima tahun lalu.

Recoil, yang sempat ramai sebagai buatan Meta, sudah selesai riwayatnya. Repositorinya diarsipkan pada 1 Januari 2025 dan tidak menerima perbaikan untuk React 19. Jotai adalah penerusnya dengan model mental yang sama.

Lalu apakah Redux masih relevan? Dua angka menjawabnya dari sisi berbeda. Redux core memang tidak dirilis ulang sejak Desember 2023, yang sekilas tampak seperti proyek terbengkalai. Namun Redux Toolkit merilis versi 2.12.0 pada Mei 2026, dan di situlah seluruh pengembangan berlangsung sekarang. Core-nya berhenti karena sudah selesai, bukan karena ditinggalkan.

Perlu diperhatikan bila Anda memasang react-redux versi 9: paket ini menuntut React 18 ke atas. Proyek yang masih memakai React 17 harus bertahan di react-redux versi 8.

Satu catatan untuk pengguna TypeScript: Redux 5 ditulis ulang sepenuhnya dengan TypeScript, dan sejak versi itu action.type wajib bertipe teks. Nilai selain teks akan melempar error saat di-dispatch.

Redux Framework di WordPress Bukan Redux yang Ini

Ada satu kebingungan yang layak diselesaikan, terutama bagi Anda yang menemukan nama ini dari dunia WordPress. Redux Framework adalah plugin WordPress buatan David Anderson dan Team Updraft, dengan lebih dari 900 ribu pemasangan aktif dan pembaruan terakhir pada Juni 2026. Fungsinya membantu pengembang tema dan plugin membuat panel pengaturan, lengkap dengan pemilih warna, pengaturan tipografi, dan pengunggah media.

Plugin itu ditulis dengan PHP, membutuhkan PHP 7.4 ke atas, dan sama sekali tidak berhubungan dengan Redux JavaScript, atau Redux JS, yang dibahas artikel ini. Kesamaannya berhenti di nama.

Dua kartu berdampingan: Redux JavaScript mengelola state aplikasi, Redux Framework membuat panel pengaturan WordPress.

Kata "redux" juga dipakai luas di luar dunia pemrograman. Anda akan menemukannya pada mod grafis untuk game, seri kipas komputer, papan ketik mekanik, sampai judul film. Kalau hasil pencarian Anda terasa melompat-lompat antara topik yang tidak nyambung, penyebabnya ada di sini.

Pertanyaan yang Sering Muncul

Apa itu Redux dan apa bedanya dengan Redux Toolkit? Redux adalah pustaka intinya, berisi aturan dasar store, action, dan reducer. Redux Toolkit adalah paket resmi yang membungkus inti itu dengan fungsi siap pakai seperti configureStore dan createSlice. Anda memasang Redux Toolkit, dan Redux ikut terbawa sebagai dependensinya. Untuk proyek baru, Redux Toolkit adalah yang seharusnya Anda pelajari.

Apa perbedaan Redux Thunk dan Redux Saga? Redux Thunk membuat Anda men-dispatch fungsi biasa yang di dalamnya memanggil API. Redux Saga memakai generator function dan memberi kendali penuh atas pembatalan, pengulangan, serta urutan proses. Thunk cukup untuk mayoritas pengambilan data dan sudah terpasang otomatis bersama Redux Toolkit. Saga baru sepadan ketika alur asinkron Anda benar-benar rumit.

Apakah Redux hanya bisa dipakai di React? Tidak. Redux adalah pustaka JavaScript berdiri sendiri, dan dokumentasi resminya menyebut binding untuk Angular, Vue, serta Mithril. Pasangan dengan React memang paling umum, lewat paket React Redux yang menyediakan useSelector dan useDispatch.

Apakah Redux masih layak dipelajari pada 2026? Layak, dengan catatan. Ekosistemnya masih aktif dan pola reducer yang Anda pelajari di sini terpakai juga di pustaka lain. Namun kuasai React polos lebih dulu, dan pastikan aplikasi Anda memang punya masalah yang diselesaikan Redux.

Kesimpulan

Redux adalah wadah data terpusat untuk aplikasi JavaScript, dengan satu jalur perubahan yang selalu sama: action masuk, reducer menghitung, store menyimpan. Pembatasan itulah yang memberi Anda riwayat perubahan yang bisa ditelusuri saat mencari bug.

Kalau Anda memutuskan memakainya, pelajari Redux Toolkit, bukan pola createStore yang sejak Redux 5 sudah ditandai usang. Dan kalau aplikasi Anda baru punya beberapa potong state yang dipakai bersama, tidak ada salahnya bertahan dengan useState dan Context bawaan React lebih dulu. Redux akan tetap ada saat aplikasi Anda benar-benar membutuhkannya.

Semoga artikel ini membantu.