Frontend Academy · Ders

Hafif React Durumu için Zustand

create() ile bir Zustand deposu oluşturun, hook ile durumu okuyun, eylemlerle güncelleyin ve gereksiz kalıp kod içermeyen yalın API'nin avantajlarından yararlanın.

Hafif React Durumu için Zustand, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Zustand Nedir?

Zustand, React için minimal ve hızlı bir durum yönetimi kütüphanesidir. Tüm API yüzeyi küçüktür: bir store oluşturun, okumak ve güncellemek için bir kanca kullanın. Durum azaltıcı, eylem veya tekrarlayan kod yoktur.

Store Oluşturma

create(), store'u durum ve eylemleri düz bir nesne olarak tanımlar. Döndürülen değer bir kancadır.

import { create } from 'zustand';

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Store Durumunu Okuma

Belirli durum dilimlerine abone olmak için kancayı bir seçici işlevle çağırın. Bileşen yalnızca seçilen dilim değiştiğinde yeniden işlenir.

function Counter() {
  const count = useCounterStore(state => state.count);
  return <p>Count: {count}</p>;
}

Eylemleri Okuma

Eylemleri de aynı şekilde seçin. Eylemler değişmediğinden onları seçmek ek yeniden işlemelere neden olmaz.

function Controls() {
  const { increment, decrement } = useCounterStore(
    state => ({ increment: state.increment, decrement: state.decrement })
  );
  return (
    <div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

set() ile Durumu Güncelleme

set() işlevi güncellemeleri sığ birleştirmeyle birleştirir (React sınıf bileşenlerindeki setState gibi). Önceki duruma bağlı güncellemeler için bir işlev aktarın.

// Merge:
set({ loading: true });

// Function for dependent updates:
set(state => ({ count: state.count + 1 }));

// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);

Asenkron Eylemler

Zustand'daki eylemler asenkron olabilir — asenkron işlemi bekledikten sonra set() çağırmanız yeterlidir.

export const useUsersStore = create<UsersStore>((set) => ({
  users: [],
  loading: false,
  fetchUsers: async () => {
    set({ loading: true });
    const users = await fetch('/api/users').then(r => r.json());
    set({ users, loading: false });
  }
}));

Dilimler — Büyük Store'ları Birleştirme

Büyük bir store'u dilimlere (ayrı nesnelere) ayırıp bunları birleştirin. Zustand'ın düzeni dilim soyutlaması gerektirmez; ancak büyük store'ları düzenlemek için temiz bir yoldur.

Ara Yazılım: persist

persist ara yazılımı, Zustand durumunu localStorage'a kaydeder ve yükleme sırasında durumu geri yükler — üstelik çok az kurulum gerektirir.

import { persist } from 'zustand/middleware';

export const useSettingsStore = create<Settings>(
  persist(
    (set) => ({
      theme: 'light',
      setTheme: (theme) => set({ theme })
    }),
    { name: 'app-settings' } // localStorage key
  )
);

Ara Yazılım: devtools

devtools ara yazılımıyla Zustand'a Redux DevTools desteği ekleyin. Tam eylem günlüğü tutma ve zamanda geriye gitme özelliklerine sahip olursunuz.

Zustand ve Redux Toolkit Karşılaştırması

Zustand: minimaldir, tekrarlayan kod içermez, kurulumu hızlıdır ve küçük ile orta ölçekli uygulamalar için harikadır. RTK: yapılandırılmış ve ölçeklenebilirdir, sınıfının en iyi DevTools desteğini sunar ve büyük ekipler için daha uygundur. İkisi de sağlam seçeneklerdir — çoğu uygulamada Zustand'ın basitliği öne çıkar.

Seçiciler ve Performans

Bileşeninizin ihtiyaç duyduğu en küçük durum dilimini her zaman seçin. Durum nesnesinin tamamını seçmek, store'daki herhangi bir değişiklikte yeniden işlemeye neden olur. Birden çok özellik seçimi için zustand/shallow içindeki shallow'ı kullanın.

import { shallow } from 'zustand/shallow';

const { theme, font } = useSettingsStore(
  state => ({ theme: state.theme, font: state.font }),
  shallow // compare each property shallowly
);

Hızlı Kontrol

Tüm bir React uygulamasının kullanabileceği bir Zustand store'u nasıl oluşturursunuz?

Özet: Zustand

create(), durumu ve eylemleri tanımlar. Döndürülen değer bir kancadır. Gereksiz yeniden işlemeleri önlemek için dilimleri seçin. set(), durum güncellemelerini birleştirir. Asenkron eylemler await sonrasında set() çağırır. localStorage için persist ara yazılımını kullanın. Redux DevTools entegrasyonu için devtools kullanın. Provider gerekmez.

Sıkça Sorulan Sorular

“Hafif React Durumu için Zustand” dersi ücretsiz mi?

Evet — “Hafif React Durumu için Zustand” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Hafif React Durumu için Zustand” dersinde ne öğreneceğim?

create() ile bir Zustand deposu oluşturun, hook ile durumu okuyun, eylemlerle güncelleyin ve gereksiz kalıp kod içermeyen yalın API'nin avantajlarından yararlanın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Hafif React Durumu için Zustand” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Redux Toolkit: createSlice ve configureStore
Hafif React Durumu için Zustand
Vue için Pinia: defineStore ve storeToRefs
Genel ve Yerel Durum Ne Zaman Kullanılır

← Frontend Academy Sayfasına Dön