React Academy · Ders

İlk Zustand Store'unuzu Oluşturma

create() ile bir store tanımlayın, durum bölümlerini ve eylemleri ekleyin, ardından useStore ile kullanın.

İlk Zustand Store'unuzu Oluşturma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste create() ile ilk Zustand store'unuzu oluşturacak, durum parçalarını ve eylemleri tanımlayacak ve store'u React bileşenlerinde kullanacaksınız.

Zustand Nedir?

Zustand, minimal ve belirli bir yaklaşımı zorunlu kılmayan bir durum yönetimi kitaplığıdır. Bir store, durum ve işlevler içeren düz bir JavaScript nesnesidir. Bileşenler buna bir kanca aracılığıyla abone olur. Sağlayıcı, durum azaltıcı ve şablon kod gerekmez.

Kurulum

Zustand'ı kurun. Herhangi bir eş bağımlılığı yoktur.

npm install zustand

Store Oluşturma

Başlangıç durumunu ve eylemleri döndüren bir işlevle create() çağırın. İşlev, durumu güncellemek için bir `set` yardımcısı alır.

import { create } from 'zustand';

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

Store'u Bileşende Kullanma

Duruma ve eylemlere erişmek için herhangi bir bileşende store kancasını çağırın. Sarmalayan bir sağlayıcı gerekmez.

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Seçici Söz Dizimi

Yalnızca ihtiyacınız olan parçaya abone olmak için store kancasına bir seçici işlevi aktarın. Bileşen yalnızca seçilen değer değiştiğinde yeniden oluşturulur.

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

set ile Durumu Güncelleme

`set` işlevi yeni değerleri store'a sığ biçimde birleştirir. Bir nesne veya mevcut durumu alıp kısmi güncellemeler döndüren bir işlev aktarabilirsiniz.

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Asenkron Eylemler

Eylemler asenkron olabilir. Verilerin yüklenmesini bekledikten sonra set çağırın. Ara yazılıma gerek yoktur — normal asenkron işlevler yazmanız yeterlidir.

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

İç İçe Durum Güncellemeleri

İç içe nesneler için dış düzeyi elle yayabilir veya derin değişiklikler yapmak üzere immer ara yazılımını kullanabilirsiniz. Varsayılan olarak set yalnızca üst düzey anahtarları birleştirir.

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

React Dışında Store'u Okuma

Bir bileşenin dışındaki store durumuna getState() ile erişin ve değişikliklere subscribe() ile abone olun. Bu, testler ve React dışı kod için kullanışlıdır.

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Hızlı Kontrol

Bir Zustand store'unda set işlevi ne yapar?

Özet

create((set) => ({ state, actions })) ile bir Zustand store'u oluşturun. Parçalara abone olmak için bileşenlerde seçici söz dizimini kullanın. Eylemler, durumu güncellemek için set() çağırır. Asenkron olarak ve React dışında getState() ile çalışır.

Sırada

Sonraki ders: **Seçiciler ve Gereksiz Yeniden Oluşturmayı Önleme** — bileşenlerin yalnızca gerektiğinde yeniden oluşturulması için belirli durum parçalarını çıkaracaksınız.

Sıkça Sorulan Sorular

“İlk Zustand Store'unuzu Oluşturma” dersi ücretsiz mi?

Evet — “İlk Zustand Store'unuzu Oluşturma” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“İlk Zustand Store'unuzu Oluşturma” dersinde ne öğreneceğim?

create() ile bir store tanımlayın, durum bölümlerini ve eylemleri ekleyin, ardından useStore ile kullanın. React 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.

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

Önceden deneyim gerekmez. CoddyKit'te React 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 1. dersidir.

“İlk Zustand Store'unuzu Oluşturma” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React 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

İlk Zustand Store'unuzu Oluşturma
Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme
Persist Middleware ile Durumu Kalıcı Hâle Getirme
Zustand DevTools ve Store'ları Test Etme

← React Academy Sayfasına Dön