State Management

Global State Savaşı:
Redux vs Zustand

Yıllarca "Redux boilerplate" yazdık. Sonra Context API geldi ama performans sorunları yarattı. Şimdi ise Zustand gibi "atomic" ve "hook-based" çözümler revaçta. Peki hangisini, ne zaman seçmeliyiz?

01. Evrim Süreci

State yönetimi kararı artık "Redux kullanayım mı?" değil, "Global state'e gerçekten ihtiyacım var mı?" sorusuyla başlar. React Query (TanStack Query) gibi server-state kütüphaneleri, client-state ihtiyacımızı %80 oranında azalttı. Geriye kalan %20'lik dilim (UI state) için ise araçlar değişti.

Redux (The Giant)

Avantaj: Tek yönlü veri akışı (flux), güçlü DevTools, middleware (Thunk/Saga) ekosistemi. Kurumsal ve çok büyük ekipler için standartlaşma sağlar.
Dezavantaj: Çok fazla boilerplate kod. Basit bir işlem için bile action, reducer, selector yazmak gerekir (Redux Toolkit bunu azaltsa da mantık aynıdır).

Zustand (The Modern)

Avantaj: Minimalist. Provider sarmalaması (wrapper hell) gerektirmez. Hook tabanlıdır. Bundle size çok küçüktür (~1KB).
Dezavantaj: Redux kadar katı bir yapısı olmadığı için ekip içinde disiplin gerektirir.

02. Kod Karşılaştırması

Basit bir sayaç uygulaması üzerinden boilerplate farkına bakalım.

Redux Toolkit

        // 1. Slice Oluştur
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 }
  }
})

// 2. Store'a Ekle
const store = configureStore({
  reducer: { counter: counterSlice.reducer }
})

// 3. Component İçinde Kullan
const count = useSelector(state => state.counter.value)
const dispatch = useDispatch()
// dispatch(counterSlice.actions.increment())

Zustand

        // 1. Store Oluştur (Hook olarak)
const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}))

// 2. Component İçinde Kullan
const { count, increment } = useStore()
// Provider'a gerek yok, direkt kullan!

03. Karar Matrisi

Server State (API verisi) ağırlıklı mı?
Global state kullanma. React Query veya SWR kullan.
Sadece Theme/User Auth gibi az değişen veriler mi?
React Context API yeterli. Ekstra kütüphaneye gerek yok.
Kompleks UI State (Filtreler, Modallar, Sepet) mi?
Modern ve hızlı çözüm için Zustand. Eğer proje çok büyükse ve katı kurallar gerekiyorsa Redux Toolkit.