TypeScript Academy · Ders

Zustand Store Türlendirme Örüntüleri

Arayüzler ve eylemlerle türlendirilmiş Zustand store'ları tanımlayın

2. ders / 413 adım

Zustand Store Türlendirme Örüntüleri, CoddyKit'te ücretsiz bir TypeScript 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, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Zustand'da Tür Belirleme Neden Önemlidir?

Zustand, en temel state yönetimi kitaplıklarından biridir. Uygun TypeScript bütünleştirmesiyle gereksiz kod yazmadan tür güvenli store okumaları, eylemleri ve seçicileri elde edersiniz.

import { create } from "zustand";

Temel Tür Güvenli Store

Store arayüzünü tanımlayın ve bir genel tür olarak create işlevine geçirin.

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

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

Store State Okuma

Belirli state parçalarını okumak için kancayı bir seçiciyle kullanın. TypeScript, dönüş türünü seçiciden çıkarır.

function Counter() {
  const count = useCounter((s) => s.count);       // number
  const increment = useCounter((s) => s.increment); // () => void
  return <button onClick={increment}>{count}</button>;
}

State ve Eylemleri Ayırma

Yaygın bir yaklaşım, daha anlaşılır bir düzen için arayüzdeki state özelliklerini eylem yöntemlerinden ayırır.

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

Zustand'da Eşzamansız Eylemler

Zustand eşzamansız eylemleri yerel olarak destekler; oluşturucu içindeki eylem işlevini eşzamansız yapmanız yeterlidir.

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

immer Ara Katmanında Tür Belirleme

Değiştirilebilir tarzda güncellemeler için Zustand'ın immer ara katmanını kullanın. Store türü doğru biçimde aktarılır.

import { immer } from "zustand/middleware/immer";

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

Geliştirici Araçları Ara Katmanı

Türleri korurken Redux DevTools desteğini etkinleştirmek için geliştirici araçlarını uygun tür belirlemeyle birleştirin.

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

Kalıcı Store Türünü Belirleme

persist ara katmanı state'i localStorage'a serileştirir. Kısmi state arayüzüyle türünü doğru biçimde belirleyin.

import { persist } from "zustand/middleware";

const useStore = create<CounterStore>()(
  persist(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

Türü Belirlenmiş Dilimler Deseni

Büyük store yapılarında, tek bir create çağrısında birleştirilen türleri belirlenmiş dilimlere ayrılın.

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

React Dışından Abone Olma

Türleri belirlenmiş store API'sini kullanarak React bileşenlerinin dışında store state'ine erişin ve değişikliklere abone olun.

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

Özet: Zustand'da Tür Belirleme

Zustand'da tür belirleme: bir store arayüzü tanımlayın, bunu create işlevine geçirin, tür güvenli state okumaları için seçicileri kullanın ve doğru tür akışı için ara katmanları (immer, geliştirici araçları, persist) kıvrımlı çağrı deseni üzerinden ekleyin.

Hızlı Kontrol

İlgisiz değişikliklerde bileşen yeniden işlenmeden bir bileşende belirli bir Zustand state parçasını nasıl okursunuz?

İnteraktif derste cevapla

Öğrendikleriniz

Zustand store'ları, bir arayüz genel türünün create işlevine geçirilmesiyle türleri belirlenmiş olur. Verimli ve tür güvenli state okumaları için seçici işlevlerini kullanın. Doğru TypeScript çıkarımı için immer, geliştirici araçları ve persist gibi ara katmanları Zustand'ın kıvrımlı çağrı deseniyle birleştirin.

Başlamak ücretsiz

Yapay zeka eğitmeniyle TypeScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 101
Dersler: 352

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Zustand Store Türlendirme Örüntüleri” dersi ücretsiz mi?

Evet — “Zustand Store Türlendirme Örüntüleri” 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 TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“Zustand Store Türlendirme Örüntüleri” dersinde ne öğreneceğim?

Arayüzler ve eylemlerle türlendirilmiş Zustand store'ları tanımlayın TypeScript 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.

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

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

“Zustand Store Türlendirme Örüntüleri” 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 TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript 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 Dilimlerini ve Thunk'larını Türlendirme
Zustand Store Türlendirme Örüntüleri
XState: Türlendirilmiş Durum Makineleri
Türlerle Türetilmiş Durum ve Seçiciler

← TypeScript Academy Sayfasına Dön