Aksiyon tipleri
- React kursu
- Orta seviye
- Ders 14/80
- 4 dk
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.
Başlangıç kodu
// Sabitleri ve listReducer'ı buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aksiyon tipleri neden sabit?
- Daha hızlı çalışmak
- useEffect'i atlamak
- Yazım hatasını önlemek Doğru cevap
- CSS'i değiştirmek
Açıklama: Sabitler yazım hatasını önler.
2 Aksiyon alanı
Aksiyonun türünü taşıyan alan ____ alanıdır.Aksiyonun türünü taşıyan alan type alanıdır.Açıklama: type alanı aksiyon türünü taşır.
3 Aksiyon alanlarını eşleştir
| Kavram | Anlamı |
|---|---|
type |
Tür |
payload |
Ek veri |
ADD |
Ekle |
CLEAR |
Sıfırla |