Zustand Nedir? Ne İçin Kullanılır? İşte Örneklerle React Zustand

“Zustand,” React tabanlı bir durum yönetim kütüphanesidir. React uygulamalarında durum yönetimi, genellikle bileşenler arasında veri paylaşımını ve güncellemeleri takip etmek amacıyla kullanılır. React’te yaygın olarak kullanılan diğer durum yönetimi araçları arasında Redux, MobX gibi kütüphaneler bulunur. Zustand, bu durum yönetimi görevini basitleştirmeyi amaçlayan bir kütüphanedir.

İşte Zustand’ın temel özellikleri ve bir örnek:

Zustand Temel Özellikleri:

1. Minimalist ve Hafif: Zustand, küçük boyutlu ve minimalist bir kütüphanedir, bu nedenle uygulama boyutunu artırmaz.
2. Hooks Tabanlı: Zustand, React hooks (useState, useEffect vb.) kullanarak durumu yönetir. Bu sayede React component’leri ile entegrasyonu kolaydır.
3. Global Durum Yönetimi: Zustand, global bir durum yönetimi sağlar, yani bir bileşenin durumunu diğer bileşenlerle paylaşabilirsiniz.
4. Performans Odaklı: Zustand, performans odaklıdır ve sadece ihtiyaç duyulan durumu günceller, bu da uygulamanın daha hızlı çalışmasına yardımcı olur.

Temel Kavramlar:

Store:

• Store, uygulamanızın genel durumunu depolayan ve yöneten ana nesnedir. Zustand’da create fonksiyonu ile oluşturulan hook, bu store’u temsil eder. Store içinde durum (state) ve durumu güncellemek için kullanılan fonksiyonlar (actions) bulunur.
• create fonksiyonuna geçilen fonksiyon, store’un başlangıç durumunu ve durumu güncellemek için kullanılacak fonksiyonları tanımlar.

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

State (Durum):

• State, uygulamanın mevcut durumunu temsil eden veridir. Zustand’da, state bir obje içinde tanımlanan özelliklerdir. Her bir özellik, uygulamanın bir parçasını temsil eder ve bu özelliklere erişmek veya güncellemek için kullanılır.
• State, bir bileşenin durumunu tutar ve create fonksiyonu içinde belirlenen başlangıç değerlere sahiptir.

const useStore = create((set) => ({
  count: 0,  // count, bir state özelliğidir
  // Diğer durum özellikleri burada olabilir
}));

Bu kavramlar arasındaki ilişki, state’in store içinde bulunduğu ve actions’ın state’i güncellemek için kullanıldığı bir yapıyı ifade eder. Örneğin, increment ve decrement fonksiyonları, state’in count özelliğini güncellemek için kullanılan actions’dır. Bu şekilde, store içinde state ve actions bir arada bulunarak uygulamanın durum yönetimi sağlanır.

Actions (Eylemler):

• Actions, uygulamanın durumunu güncellemek için kullanılan fonksiyonlardır. State’i değiştirmek veya güncellemek için kullanılırlar. Actions, genellikle bir obje içinde tanımlanır ve bu obje içindeki fonksiyonlar state’i güncellemek için kullanılır.
• Zustand’da, actions set fonksiyonu içinde kullanılan bir fonksiyon olarak tanımlanır.

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),  // increment, bir action'dır
  decrement: () => set((state) => ({ count: state.count - 1 })),  // decrement, bir action'dır
}));

Zustand Kullanımı Örnekleri:

// Zustand kütüphanesini yükle
import create from 'zustand';

// Zustand kullanımı için bir hook oluştur
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// React bileşeni
function Counter() {
  // Zustand hook'unu kullanarak durumu al
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

// Kullanımı
function App() {
  return (
    <div>
      <h1>Zustand Counter App</h1>
      <Counter />
    </div>
  );
}

Yukarıdaki örnekte, useStore adlı bir Zustand hook’u oluşturulmuş ve bu hook içinde count adında bir durum ile bu durumu güncelleyen increment ve decrement fonksiyonları tanımlanmıştır. Counter bileşeni, bu hook’u kullanarak global durumu okur ve düğmelere tıklanınca durumu günceller.

Örnek 2: Kullanıcı Bilgileri Yönetimi:

import create from 'zustand';

const useUserStore = create((set) => ({
  user: null,
  setUser: (newUser) => set({ user: newUser }),
}));

function UserProfile() {
  const { user, setUser } = useUserStore();

  const handleLogin = () => {
    const newUser = { username: 'example', email: 'example@example.com' };
    setUser(newUser);
  };

  const handleLogout = () => {
    setUser(null);
  };

  return (
    <div>
      {user ? (
        <div>
          <p>Welcome, {user.username}!</p>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

Bu örnekte, useUserStore adlı bir Zustand hook’u oluşturulmuş ve içinde kullanıcı bilgilerini içeren bir user durumu ve bu durumu güncelleyen bir setUser fonksiyonu bulunmaktadır.

Örnek 3: Alışveriş Sepeti Yönetimi:

import create from 'zustand';

const useCartStore = create((set) => ({
  cart: [],
  addToCart: (item) => set((state) => ({ cart: [...state.cart, item] })),
  removeFromCart: (itemToRemove) =>
    set((state) => ({ cart: state.cart.filter((item) => item !== itemToRemove) })),
}));

function ShoppingCart() {
  const { cart, addToCart, removeFromCart } = useCartStore();

  const handleAddToCart = (item) => {
    addToCart(item);
  };

  const handleRemoveFromCart = (item) => {
    removeFromCart(item);
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {cart.map((item, index) => (
          <li key={index}>
            {item}{' '}
            <button onClick={() => handleRemoveFromCart(item)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => handleAddToCart('Product A')}>Add Product A</button>
      <button onClick={() => handleAddToCart('Product B')}>Add Product B</button>
    </div>
  );
}

Bu örnekte, alışveriş sepeti yönetimi için bir Zustand hook’u oluşturulmuş ve içinde cart adında bir dizi durumu, bu diziyi güncelleyen addToCart ve removeFromCart fonksiyonları bulunmaktadır.

Bu örnekler, Zustand’ın çeşitli durum yönetimi senaryolarında nasıl kullanılabileceğini göstermektedir. Zustand, React uygulamalarında durum yönetimini basitleştirmek ve daha etkili bir şekilde kullanmak için güçlü bir araçtır.

npm install zustand

yarn ile Yükleme:

yarn add zustand

Bu komutlar, Zustand kütüphanesini projenize eklemek için gerekli olan dosyaları ve bağımlılıkları yükler. İşlem tamamlandığında, Zustand’ı kullanmaya başlayabilirsiniz.

Kütüphaneyi projenize ekledikten sonra, Zustand’ın create fonksiyonunu kullanarak bir durum yönetimi hook’u oluşturabilir ve bu hook’u kullanarak durumları yönetebilirsiniz.