Zustand sepet store

Zustand ile bir sepet store'u yazarsın.

Zustand'a taşıma

Bu derste aynı sepet mantığını Zustand'a taşıyacaksın. create ile store yaz, addItem action'ını tanımla; bileşenler useCart hook'u ile erişir.

Zustand, Redux gibi Provider gerektirmez; store modül seviyesinde yaşar. Bu, kodu daha kısa ve anlaşılır yapar.

Aynı mantığın farklı kütüphanelerle çözümünü görmek, state yönetimini derinden kavramanı sağlar.

useCart store

Zustand store, bir hook olarak dışa aktarılır. Bileşenlerde const items = useCart((s) => s.items) ile sepeti okur, const addItem = useCart((s) => s.addItem) ile action alırsın.

set fonksiyonu, yeni state'i otomatik birleştirir; set((s) => ({ items: [...s.items, payload] })) eski listeye yeni öğe ekler.

Zustand, RTK'nin immer bağımlılığına benzer şekilde immutability'i otomatik sağlar; spread yazmak zorunda değilsin.

Uygulama useCart store yaz

Aşağıdaki iskeleti tamamla. create ile useCart store'u tanımla. State: { items: [], addItem: (product) => set((s) => ({ items: [...s.items, product] })) }. export const useCart = create(...) ile dışa aktar.

Örnek çözümü göster

import { create } from 'zustand';

export const useCart = create((set) => ({
  items: [],
  addItem: (product) => set((s) => ({ items: [...s.items, product] })),
}));

Kendini test et

Zustand'ın Redux'a avantajı?
```
No provider = Zustand.
```
- Daha hızlı çalışır
- Daha çok kod yazar
- Provider gerektirmez
- Yalnızca test için
Cevabı göster

Provider gerektirmez — Zustand Provider gerektirmez.

addItem action

addItem: (product) => ____((s) => ({ items: [...s.items, product] }));

Cevabı göster

addItem: (product) => set((s) => ({ items: [...s.items, product] }));

Zustand sepet store: kavramları eşleştir

create

Store kurar
useCart

Hook döner
set

State günceller
selector

İlgili parça

Sıradaki ders: SWR ile veri çekme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler