Durum Yığınınızı Belirleyen Soru
Redux'ı React Query ile kıyaslamayı bırakın.
Bu, ne inşa edeceğinizi bilmeden çekiç mi yoksa tornavida mı istediğinizi sormak gibidir. Redux, React Query ve Zustand'ın hepsi farklı problemleri çözer.
Asıl karar tek bir sorudan gelir: Her bir state parçası için doğruluk kaynağının (source of truth) sahibi kimdir?
İki tür doğruluk vardır.
- Sahipli Doğruluk (Owned Truth) Kaynak istemcidir (client). Şunları içerir:
- Yan menü (sidebar) açık mı?
- Mevcut tema nedir?
- Formun hangi adımı aktif? Bu state, yerel kararlarınızla var olur ve biter. Kendini bir sunucuyla yeniden doğrulamasına gerek yoktur.
- Ödünç Alınan Doğruluk (Borrowed Truth) Kaynak sunucuda yaşar. İstemci, bu verinin sadece bir yansımasını tutar. Bu veri siz farkında olmadan değişir. Göreviniz şunları yönetmektir:
- Bayatlık (Staleness)
- Geçersiz kılma (Invalidation)
- Yeniden getirme (Refetching)
- Önbelleğe alma (Caching)
Çoğu geliştirici, her ikisi için de tek bir araç kullandığı için zorluk yaşıyor. Ödünç alınan doğruluğu istemci tarafındaki bir reducer ile yönetmeye çalıştığınızda, aslında React Query'yi kötü bir şekilde yeniden yazmış olursunuz. Yükleme durumlarını (loading states), hata yönetimini ve önbelleğe almayı manuel olarak yazarsınız. Bu da çok büyük miktarda gereksiz kod oluşturur.
Kazanmak için onları ayırın.
Ödünç alınan doğruluk için React Query kullanın. Zor senkronizasyon işlerini o halleder. Sahipli doğruluk için Zustand kullanın. Hiçbir ek prosedür gerektirmeden (zero ceremony) basit değer depolama işlerini o halleder.
Sunucu verilerini Zustand'a boşaltmayın. Bu sınırı net tutun.
Peki ya Redux ve Sagas? Sagas veri çekmek için değildir. Zaman içinde karmaşık süreçleri yönetmek (orchestrating) içindir. Uygulamanız şunları yönetiyorsa kullanın:
- Eşzamanlı, iptal edilebilir akışlar.
- Gerçek zamanlı websocket akışları.
- Karmaşık durum makineleri (state machines).
Eğer React Query kullanıyorsanız ve Sagas'larınız hiçbir şey yapmıyorsa, onlara ihtiyacınız yoktur.
Üçüncü bir yol var: Birleştirme (Unification). RTK Query ve Redux, her şeyi tek bir store içinde tutmanıza olanak tanır. Bu size tüm uygulamanızın tek bir anlık görüntüsünü (snapshot) verir. Bu; hata ayıklamayı (debugging), çıkış yapmayı (logging out) ve çevrimdışı kalıcılığı (offline persistence) çok daha kolay hale getirir.
İhtiyaçlarınıza göre yolunuzu seçin:
- React Query + Zustand: Düşük karmaşıklık isteyen küçük ekipler için en iyisidir.
- Redux + Sagas: Ticaret uygulamaları gibi yüksek eşzamanlılık gerektiren alanlar için en iyisidir.
- RTK Only: Tek bir doğruluk kaynağına ihtiyaç duyan büyük kurumsal ekipler için en iyisidir.
Bir araç seçmeden önce, state'in istemcide yaşamasına gerçekten gerek olup olmadığını sorun. Server Components, bu mantığın büyük bir kısmını tekrar sunucuya taşıyor.
Önce doğruluk sahibinin kim olduğunu bulun. Araç kendiliğinden gelecektir.