Belajar Redux - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Di episode 1 kalian tahu mengapa Redux lahir. Sekarang kita masuk satu tingkat lebih dalam: bagaimana Redux bekerja dan apa saja komponen penyusunnya. Episode 2 adalah jembatan antara konsep dan kode — setelah ini, seluruh episode praktik akan terasa lebih masuk akal karena kalian sudah mengerti fondasinya.

Kita akan membahas tiga prinsip Redux, siklus data lengkap dari dispatch sampai UI re-render, peran middleware dan Immer, serta peta komponen utama Redux Toolkit. Anggap episode ini sebagai peta arsitektur: setiap episode berikut tinggal mengisi satu per satu ruangan di dalam peta tersebut.

#Tiga Prinsip Redux

#Single Source of Truth

Seluruh state aplikasi disimpan dalam satu store berbentuk pohon objek JavaScript tunggal. Komponen mana pun bisa membaca state, tetapi hanya store yang memegang kepemilikan sebenarnya.

Satu store menyimpan seluruh state

const state = store.getState()

store.getState() selalu mengembalikan snapshot state terkini. Karena hanya ada satu store, tidak ada dua sumber data yang bisa bertentangan — ini yang membuat debug dan audit menjadi mudah.

#State Read-Only

State tidak bisa diubah langsung dari luar. Satu-satunya cara mengubah state adalah mengirim action — objek deskriptif yang menyatakan apa yang terjadi.

Action sebagai deskripsi perubahan

const action = { type: "todos/toggle", payload: "todo-1" }
store.dispatch(action)

Action { type: "todos/toggle", payload: "todo-1" } hanya mendeskripsikan maksud, bukan melakukan perubahan. store.dispatch(action) menyerahkan action itu ke reducer untuk diproses. Batasan ini membuat alur perubahan state terpusat dan bisa di-track.

#Perubahan via Reducer Murni

Reducer adalah fungsi murni yang menerima state dan action, lalu mengembalikan state baru. Fungsi murni berarti: input sama, output pasti sama; tidak membaca data global; dan tidak melakukan efek samping.

Reducer adalah fungsi murni

function counterReducer(state = { count: 0 }, action) {
  if (action.type === "counter/increment") {
    return { count: state.count + 1 }
  }
  return state
}

counterReducer(state, action) tidak mengubah state lama, melainkan mengembalikan objek baru { count: state.count + 1 }. Karena murni, reducer bisa diuji dengan mudah dan hasilnya selalu deterministik.

#Cara Kerja di Balik Layar

#Siklus Data Lengkap

Ketika aplikasi berjalan, siklus berikut berulang terus:

dispatch(action) -> reducer -> store (state baru) -> notify subscriber -> UI re-render

• Komponen memanggil dispatch(action).
• Reducer menghitung state baru.
• Store menyimpan state baru dan memberitahu semua subscriber.
• React Redux mengaktifkan komponen yang subscribed untuk re-render.

Perlu diingat: store.subscribe(fn) adalah API level bawah yang biasanya tidak kalian sentuh langsung — react-redux menyambungkannya lewat hooks seperti useSelector.

#Peran Middleware

Middleware berdiri di antara dispatch dan reducer. Dia bisa melihat action, memodifikasinya, menghentikannya, atau menjalankan efek samping. Contoh paling populer adalah Redux Thunk untuk fungsi async dan createListenerMiddleware untuk reaksi terpusat.

Posisi middleware pada alur

dispatch(action) -> [middleware...] -> reducer -> store

Tanpa middleware, dispatch hanya menerima objek action. Dengan thunk, dispatch juga bisa menerima fungsi yang berisi logika async — ini fondasi createAsyncThunk yang akan kita pelajari di episode 6.

#Immer untuk Reducer yang Aman

Menulis immutable update secara manual rawan error. Redux Toolkit menyisipkan Immer ke dalam reducer, sehingga kalian bisa menulis kode yang terlihat seperti mutasi langsung:

Mutasi draft yang aman dengan Immer

const slice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count += 1
    },
  },
})

state.count += 1 terlihat seperti mutasi, tapi Immer membuat draft sementara dan menghasilkan objek state baru di balik layar. Immer akan membahas mekanisme draft dan frozen state secara lebih mendalam di episode 19.

#Komponen Utama Redux Toolkit

Untuk memudahkan navigasi di sisa series, berikut peta komponen utama RTK:

• configureStore: membuat store dengan default middleware dan DevTools.
• createSlice: menulis reducer + action creator dalam satu blok.
• createAsyncThunk: action async dengan lifecycle pending, fulfilled, rejected.
• createEntityAdapter: mengelola koleksi entitas yang dinormalisasi.
• createListenerMiddleware: middleware reaktif berbasis action.
• RTK Query: createApi untuk fetching dan caching data server.

Masing-masing akan dibahas secara khusus di episode 3 sampai 22. Untuk sekarang, cukup hafalkan nama dan perannya masing-masing.

#Penutup

Episode 2 memberi kalian lensa untuk membaca seluruh sisa series: tiga prinsip Redux, siklus data yang searah, middleware sebagai tempat efek samping, Immer sebagai pengaman reducer, dan peta komponen RTK.

Inti yang harus dibawa pulang:

• Satu store adalah single source of truth seluruh state aplikasi.
• State hanya berubah lewat action yang di-dispatch.
• Reducer adalah fungsi murni yang mengembalikan state baru.
• Siklus data: dispatch, reducer, store, notify, lalu re-render.
• Middleware berdiri di antara dispatch dan reducer.
• Immer membuat penulisan reducer terasa seperti mutasi tanpa melanggar immutability.

Di episode 3 selanjutnya kalian akan mulai praktik: setup store dan Provider — membuat store pertama dengan configureStore, membungkus aplikasi dengan Provider dari react-redux, dan menyusun struktur folder app serta features yang akan dipakai sepanjang series ini.