React
Aksiyon tipleri
Aksiyon tiplerini sabit olarak tanımlamayı öğrenirsin.
Aksiyon tipleri
Aksiyon tipleri genellikle string sabitler olarak tanımlanır: const ADD = "ADD"; const REMOVE = "REMOVE";. Bu, yazım hatasını önler ve refactor'u kolaylaştırır.
Birden çok dosyada aynı string kullanıldığında, bir harf hatası uzun süre fark edilmeyebilir. Sabit kullanırsan IDE otomatik tamamlama ve hata denetimi sağlar. Bu yüzden ekip çalışmasında neredeyse zorunludur.
Tip güvenliği için TypeScript kullanılıyorsa, type Action = { '{ type: typeof ADD; payload: Item }' } | ... şeklinde bir birleşim tipi (union type) tanımlanır. Bu derleme zamanında hataları yakalar.
Payload kullanımı
Payload, aksiyonun ek verisini taşır. { '{ type: "ADD", payload: { id: 1, name: "Ekmek" } }' } gibi. Reducer, payload'ı alıp state'e ekler.
Payload olmadan da aksiyon olabilir: { '{ type: "CLEAR" }' }. Bu, state'i sıfırlamak gibi durumlarda yeterlidir. Her aksiyon payload taşımak zorunda değildir.
İyi alışkanlık: payload'ın tipini tutarlı tut. Bir aksiyon bazen nesne bazen sayı taşırsa, kod okunması zorlaşır. Tek tip payload daha temizdir.
Uygulama Aksiyon sabitleri ve reducer
Aşağıdaki iskeleti tamamla. ADD ve REMOVE sabitlerini string olarak tanımla. listReducer fonksiyonu yaz: switch(action.type) ile ADD case'inde { '{ ...state, items: [...state.items, action.payload] }' } döndür; REMOVE case'inde { '{ ...state, items: state.items.filter(i => i.id !== action.payload.id) }' } döndür; default state döndürsün. Reducer'ı dışa aktar.
Örnek çözümü göster
const ADD = "ADD";
const REMOVE = "REMOVE";
function listReducer(state, action) {
switch (action.type) {
case ADD:
return { ...state, items: [...state.items, action.payload] };
case REMOVE:
return { ...state, items: state.items.filter((i) => i.id !== action.payload.id) };
default:
return state;
}
}
export default listReducer;
Kendini test et
-
Aksiyon tipleri neden sabit?
- Daha hızlı çalışmak
- useEffect'i atlamak
- Yazım hatasını önlemek
- CSS'i değiştirmek
Cevabı göster
Yazım hatasını önlemek — Sabitler yazım hatasını önler.
-
Aksiyon alanı
Aksiyonun türünü taşıyan alan ____ alanıdır.
Cevabı göster
Aksiyonun türünü taşıyan alan type alanıdır.
-
Aksiyon alanlarını eşleştir
- type
- Tür
- payload
- Ek veri
- ADD
- Ekle
- CLEAR
- Sıfırla
Sıradaki ders: Kompozisyon
