Aksiyon ve state
- React kursu
- Başlangıç
- Ders 62/84
- 4 dk
Aksiyon nesneleriyle state geçişlerini tanımlamayı öğrenirsin.
Aksiyon ve state
Bir aksiyon, ne olduğunu anlatan bir nesnedir: {type: "increment"}. dispatch ile bu nesneyi reducer'a gönderirsin; reducer type'a bakar.
Örnek: switch(action.type) içinde case "increment": return state + 1;. Her case yeni bir state döndürür; varsayılan olarak mevcut state'i geri verirsin.
Aksiyonlar veri de taşıyabilir: {type: "ekle", payload: 5}.
dispatch çağrısı
Aksiyon göndermek için dispatch({type: "increment"}) yazarsın. dispatch, reducer'ı çağırır ve dönen yeni state'i kaydeder; React yeniden çizer.
dispatch'e herhangi bir aksiyon nesnesi geçebilirsin; adı sabit değildir ama type alanı geleneksel olarak zorunludur.
Bu yapı, mantığın bileşenden ayrı olmasıyla testleri kolaylaştırır.
Uygulama Artırmalı reducer
Aşağıdaki iskeleti tamamla. reducer fonksiyonu yaz; switch(action.type) içinde case "increment": return state + 1; ve default: return state; olsun. Counter bileşeni yaz; useReducer'ı içe aktar, const [state, dispatch] = useReducer(reducer, 0); tanımla. <button onClick={() => dispatch({type: "increment"})}>{state}</button> döndür. Dışa aktar.
Başlangıç kodu
import { useReducer } from "react";
// reducer ve Counter bileşenini buraya tanımlaÖrnek çözüm
import { useReducer } from "react";
function reducer(state, action) {
switch (action.type) {
case "increment": return state + 1;
default: return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, 0);
return <button onClick={() => dispatch({ type: "increment" })}>{state}</button>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir aksiyon en az hangi alanı taşır?
type matches in the reducer switch.- payload
- value
- id
- type Doğru cevap
Açıklama: type aksiyonun türünü söyler.
2 Aksiyon ve state: eksik parçayı tamamla
case "increment": return state + ____;case "increment": return state + 1;Açıklama: Artırma state + 1 ile yapılır.
3 Aksiyon ve state: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
dispatch({type}) |
Aksiyon gönder |
switch(action.type) |
Tür eşleştirme |
case "x" |
Bir durum |
return state |
Varsayılan |