Belajar Zustand - Middleware: devtools & redux

#Pendahuluan

Melihat state berubah dalam waktu nyata adalah kunci debugging. Episode 10 menghubungkan Zustand dengan Redux DevTools, extension browser yang memberi kalian time-travel dan tracing action. Kita juga membahas middleware redux untuk tim yang ingin memakai mental model reducer ala Redux tanpa meninggalkan Zustand.

Dua middleware ini menjembatani Zustand ke ekosistem debugging dan pola lama yang sudah akrab bagi banyak tim.

#Middleware devtools

#Integrasi Redux DevTools

Pasang extension Redux DevTools di browser, lalu bungkus store dengan devtools:

Store dengan middleware devtools

import { create } from 'zustand'
import { devtools } from 'zustand/middleware'
 
interface CounterState {
  count: number
  increment: () => void
}
 
export const useCounter = create<CounterState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set((s) => ({ count: s.count + 1 })),
    }),
    { name: 'CounterStore' },
  ),
)

devtools(initializer, { name: 'CounterStore' }) mengirim setiap set sebagai action ke extension. Di panel Redux DevTools, kalian melihat daftar action berlabel nama store, state sebelum dan sesudah, serta diff perubahan.

#Konfigurasi Nama Store dan Tracing

Opsi name memisahkan beberapa store di panel yang sama:

Opsi name untuk beberapa store

devtools(initializer, { name: 'AuthStore' })
devtools(initializer, { name: 'CartStore' })

{ name: 'AuthStore' } memberi label unik di devtools. Zustand juga mengirim metadata fungsi pembuat state, sehingga action bisa dilacak ke sumbernya di kode — ini kemudahan debugging yang tidak dimiliki Redux klasik tanpa setup tambahan.

#Time-Travel Debugging

Dengan devtools aktif, tombol jump di extension memundurkan state ke titik mana pun dalam histori. Zustand mendukung time-travel ini secara built-in lewat middleware devtools — kalian bisa memutar kembali serangkaian action untuk memahami bagaimana bug muncul.

#Middleware redux

#Pola Reducer ala Redux

Untuk tim yang nyaman dengan reducer, Zustand menyediakan middleware redux:

Store dengan middleware redux

import { create } from 'zustand'
import { redux } from 'zustand/middleware'
 
type Action = { type: 'inc'; payload?: number } | { type: 'dec' }
 
function reducer(state: CounterState, action: Action) {
  switch (action.type) {
    case 'inc':
      return { count: state.count + (action.payload ?? 1) }
    case 'dec':
      return { count: state.count - 1 }
    default:
      return state
  }
}
 
const initialState: CounterState = { count: 0 }
 
export const useCounter = create(redux(reducer, initialState))

create(redux(reducer, initialState)) menerima reducer murni dan initial state. Dispatch action lewat dispatch yang disediakan store:

Dispatch action

const dispatch = useCounter((s) => s.dispatch)
dispatch({ type: 'inc', payload: 2 })

dispatch({ type: 'inc', payload: 2 }) mengikuti pola Redux klasik: satu state source of truth, reducer murni yang bisa diuji, dan action ber-typed. Perhatikan tidak ada Provider atau store configuration terpisah.

#Kapan Memakai redux

Middleware redux menjawab kebutuhan tim tertentu:

• Tim yang pindah dari Redux dan ingin transisi halus.
• Reducer murni yang sudah ditulis dan ingin dipakai ulang.
• Kebiasaan developer yang nyaman dengan switch action types.

Jika tidak ada kebutuhan itu, tetap pakai set/get biasa — lebih ringkas dan idiomatis. redux adalah alat jembatan, bukan pengganti default.

#Menggabungkan devtools dan redux

Keduanya bisa dikombinasikan: bungkus redux dengan devtools agar pola reducer tetap bisa di-debug:

redux di dalam devtools

export const useCounter = create<CounterState>()(
  devtools(redux(reducer, initialState), { name: 'CounterRedux' }),
)

devtools(redux(reducer, initialState), ...) memberi kalian reducer murni plus time-travel sekaligus. Urutan middleware menentukan bentuk store — bungkus luar terlebih dahulu diproses terakhir saat update.

#Penutup

Episode 10 menghubungkan Zustand ke ekosistem Redux: middleware devtools untuk time-travel dan tracing action di extension browser, serta middleware redux untuk memakai reducer ala Redux dalam satu store tanpa Provider.

Inti yang harus dibawa pulang:

• devtools mengirim setiap set ke Redux DevTools sebagai action.
• Opsi name memisahkan beberapa store di panel devtools.
• Time-travel memundurkan state ke titik mana pun dalam histori.
• Middleware redux menerima reducer dan initial state, menyediakan dispatch.
• redux adalah jembatan untuk tim yang akrab pola Redux.
• Gabungkan devtools(redux(...)) untuk reducer yang tetap bisa di-debug.

Di episode 11 selanjutnya kita akan membahas persistence dan rehydration lanjutan — custom storage dengan createJSONStorage untuk sessionStorage dan AsyncStorage, serialization, versioning plus migrate untuk state lama, serta penanganan state yang gagal ter-rehydrate.