State Management

Durum Yönetimi

Okunuşu: steyt menıcmınt

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

State management (durum yönetimi), bir uygulamanın çalışırken değişen verileri nasıl saklayıp güncellediği, paylaştığı ve arayüzü bunlarla senkron tuttuğudur.

State management nedir?

Durum (state), değişebilen ve kullanıcının gördüğünü etkileyen her veridir. Bir kısmı tek bir bileşene aittir, örneğin bir açılır menünün açık olup olmadığı; bir kısmı uygulama genelinde paylaşılır, örneğin o anki kullanıcı ya da sepetteki ürünler; bir kısmı da sunucudaki verinin bir kopyasıdır, örneğin siparişlerin bir listesi. Her türü farklı bir yolla ele almak en kolayıdır.

Yerel durum onu kullanan bileşende, React'in useState'i ya da Vue'nun ref'i gibi araçlarla yaşar. Birbirinden uzak birkaç bileşen aynı veriye ihtiyaç duyduğunda veri ortak bir yere taşınır: React Context ya da Redux, Zustand, Vue için Pinia veya Angular için NgRx gibi bir store kütüphanesi. Bileşenler store'dan okur ve onu açıkça tanımlanmış eylemlerle (action) günceller.

Sunucu durumunun kendi sorunları vardır: önbellekleme, yükleniyor ve hata durumları, yeniden çekme ve veriyi güncel tutma. TanStack Query ve SWR gibi kütüphaneler bunda uzmanlaşmıştır; framework'ler de giderek veriyi sunucuda yüklüyor. Sunucu durumunu istemci durumundan ayırmak, çoğu zaman büyük bir global store ihtiyacının çoğunu ortadan kaldırır.

Sık yapılan bir yanlış, her uygulamanın bir global durum kütüphanesine ihtiyacı olduğunu düşünmektir. Birçok uygulama yerel durum, biraz paylaşılan context ve bir veri çekme kütüphanesiyle gayet iyi çalışır. Redux gibi bir store, durumun büyük kısmı paylaşıldığında, birçok yerden güncellendiğinde ve öngörülebilir, hata ayıklanabilir değişikliklere ihtiyaç duyduğunda işe yarar.

Önemli noktalar

Durum, değişen ve kullanıcıların gördüğünü etkileyen veridir.
Yerel durum tek bir bileşende kalır; paylaşılan durum context'e ya da bir store'a taşınır.
Redux, Zustand, Pinia ve NgRx yaygın store kütüphaneleridir.
Sunucu durumunu en iyi TanStack Query gibi veri çekme kütüphaneleri ele alır.
Her uygulamanın global bir store'a ihtiyacı yoktur; yerel durumla başlayın.

Örnek

Zustand ile küçük, paylaşılan bir store (React)javascript

import { create } from "zustand";

// One store, shared by any component that needs the cart
const useCart = create((set) => ({
  items: [],
  add: (item) => set((state) => ({ items: [...state.items, item] })),
  clear: () => set({ items: [] }),
}));

function CartBadge() {
  const count = useCart((state) => state.items.length);  // re-renders only when count changes
  return <span>{count}</span>;
}

function AddButton({ product }) {
  const add = useCart((state) => state.add);
  return <button onClick={() => add(product)}>Add to cart</button>;
}

Sık sorulan sorular

Redux'a ihtiyacım var mı?

Çoğu zaman hayır. Yerel durum ve bir veri çekme kütüphanesiyle başlayın. Redux ya da Zustand gibi daha hafif bir store, çok sayıda durum paylaşıldığında ve uygulamanın birçok yerinden değiştirildiğinde işe yarar.

Sunucu durumu ile istemci durumu arasındaki fark nedir?

İstemci durumu yalnızca tarayıcıda vardır, açık bir menü ya da bir taslak gibi. Sunucu durumu ise gerçekte sunucuda yaşayan ve eskiyebilen verinin önbellekteki bir kopyasıdır; bu yüzden çekilmesi, önbelleğe alınması ve yenilenmesi gerekir.

Prop drilling nedir?

Veriyi, derinlerdeki bir bileşene ulaştırmak için onu kullanmayan birçok bileşen katmanından geçirmektir. Context ya da bir store, iç içe bileşenin veriyi doğrudan okumasını sağlayarak bunu önler.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin