Karmaşık Durum için useReducer
Durum geçişlerini bir reducer işleviyle modelleyin, eylem nesnelerini dispatch edin ve durum mantığı karmaşıklaştığında useState yerine useReducer'ı tercih edin.
Karmaşık Durum için useReducer, 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.
useState Yeterli Olmadığında
Durum geçişleri karmaşık mantık, birbiriyle ilişkili birden çok değer veya yeni durumun önceki duruma önemsiz olmayan şekillerde bağlı olduğu koşullar içerdiğinde useReducer, birden çok useState çağrısından daha temiz bir seçimdir.
İndirgeyici İşlev Deseni
Bir indirgeyici saf bir işlevdir: (state, action) => newState. Geçerli durumu ve bir eylem nesnesini alır, ardından bir sonraki durumu döndürür. Değişiklik yapmayın — her zaman yeni bir nesne döndürün.
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'reset'; payload: number };
function counterReducer(state: number, action: Action): number {
switch (action.type) {
case 'increment': return state + 1;
case 'decrement': return state - 1;
case 'reset': return action.payload;
default: return state;
}
}useReducer Söz Dizimi
useReducer(reducer, initialState), geçerli durumu ve bir dispatch işlevini döndürür. Durum geçişini tetiklemek için dispatch işlevini bir eylem nesnesiyle çağırın.
function Counter() {
const [count, dispatch] = useReducer(counterReducer, 0);
return (
<div>
<p>{count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'reset', payload: 0 })}>Reset</button>
</div>
);
}Türlendirilmiş Eylemler — Ayırt Edici Birleşimler
İndirgeyicideki dallanma yapısında kapsamlı tür denetimi elde etmek için eylemler için TypeScript ayırt edici birleşim türlerini kullanın.
type CartAction =
| { type: 'ADD_ITEM'; item: CartItem }
| { type: 'REMOVE_ITEM'; id: string }
| { type: 'SET_QUANTITY'; id: string; qty: number }
| { type: 'CLEAR' };Karmaşık Durum Örneği: Alışveriş Sepeti
Ekleme, kaldırma ve miktar güncelleme işlemlerine sahip bir alışveriş sepeti, useReducer için mükemmel bir kullanım alanıdır.
interface CartState {
items: CartItem[];
total: number;
}
function cartReducer(state: CartState, action: CartAction): CartState {
switch (action.type) {
case 'ADD_ITEM': {
const exists = state.items.find(i => i.id === action.item.id);
if (exists) {
const items = state.items.map(i =>
i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i
);
return { ...state, items, total: calcTotal(items) };
}
const items = [...state.items, { ...action.item, qty: 1 }];
return { ...state, items, total: calcTotal(items) };
}
case 'CLEAR': return { items: [], total: 0 };
default: return state;
}
}Gönderim İşlevi Sabittir
dispatch işlevi sabittir — oluşturma işlemleri arasında değişmez. Bunu güvenle özellik olarak aktarabilir veya yeniden çalıştırmaları tetiklemeden useEffect bağımlılığı olarak kullanabilirsiniz.
useReducer + useContext Birlikteliği
Güçlü bir desen: bir bağlam hem durumu hem de gönderim işlevini sağlar; böylece herhangi bir tüketici, özellikleri zincirleme aktarmadan durumu okuyabilir veya eylemler gönderebilir.
const CartContext = createContext<{ state: CartState; dispatch: Dispatch<CartAction> } | null>(null);
function CartProvider({ children }: { children: React.ReactNode }) {
const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });
return <CartContext.Provider value={{ state, dispatch }}>{children}</CartContext.Provider>;
}useReducer ve useState Karşılaştırması
Şu durumlarda useReducer'ı seçin: durumun birden çok alt değeri varsa, sonraki durum karmaşık şekillerde öncekine bağlıysa, geçişler çok sayıdaysa ve açıkça adlandırılmışsa veya durum mantığını bileşenden ayrı olarak sınamak istiyorsanız.
İndirgeyicileri Yalıtılmış Olarak Sınama
İndirgeyiciler saf işlevler olduğu için herhangi bir bileşen oluşturmadan kolayca sınanabilir.
test('increment action increases count', () => {
expect(counterReducer(0, { type: 'increment' })).toBe(1);
expect(counterReducer(5, { type: 'increment' })).toBe(6);
});
test('reset action sets count to payload', () => {
expect(counterReducer(42, { type: 'reset', payload: 0 })).toBe(0);
});Değişmez Güncellemeler için Immer
immer kitaplığı, değişiklik yapıyormuş gibi görünen ancak yeni ve değişmez bir durum üreten kod yazmanıza olanak tanır. İndirgeyicilerdeki karmaşık iç içe nesne güncellemeleri için kullanışlıdır.
Kısa Kontrol
Bir indirgeyicinin işlev imzası nedir?
Özet: useReducer
(state, action) => newState — saf, değişiklik yapmaz. useReducer(reducer, initial), [state, dispatch] döndürür. Güvenlik için ayırt edici birleşim eylem türlerini kullanın. Gönderim işlevi sabittir. Çok sayıda geçiş içeren karmaşık durumlar için uygundur. Genel durum yönetimi için useContext ile birleştirin. İndirgeyicileri saf işlevler olarak bağımsız biçimde sınayın.
Sıkça Sorulan Sorular
“Karmaşık Durum için useReducer” dersi ücretsiz mi?
Evet — “Karmaşık Durum için useReducer” 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.
“Karmaşık Durum için useReducer” dersinde ne öğreneceğim?
Durum geçişlerini bir reducer işleviyle modelleyin, eylem nesnelerini dispatch edin ve durum mantığı karmaşıklaştığında useState yerine useReducer'ı tercih edin. 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.
“Karmaşık Durum için useReducer” 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
- Genel Durum için useContext
- Karmaşık Durum için useReducer
- Performans için useMemo ve useCallback
- Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma