Özet - useReducer

Çok adımlı bir sayaç reducer'ı yazıp bileşene bağlarsın.

Özet - useReducer

Bu grupta useReducer'ı öğrendin. State, bir reducer saf fonksiyonuyla yönetilir: (state, action) => newState. Sen dispatch ile aksiyon gönderirsin.

Aksiyonlar {type, payload} nesneleridir; reducer switch ile type'a bakar. Karmaşık state için useReducer, useState'ten temizdir.

İleride Redux aynı modeli genişletecek; temeli burada sağlamlaştırdın.

Uygulama useReducer özet görevi

Aşağıdaki iskeleti tamamla. reducer fonksiyonu yaz; switch(action.type) içinde case "reset": return 0; 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: "reset"})}>{state}</button> döndür. Dışa aktar.

Örnek çözümü göster

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "reset": return 0;
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  return <button onClick={() => dispatch({ type: "reset" })}>{state}</button>;
}

export default Counter;

Kendini test et

Aşağıdakilerden hangisi yanlış?
```
The choice depends on complexity.
```
- reducer saf fonksiyondur
- useReducer her zaman useState'ten iyidir
- aksiyon type taşır
- dispatch aksiyon gönderir
Cevabı göster

useReducer her zaman useState'ten iyidir — Basit state için useState daha uygun olabilir.
Özet - useReducer: kavramları eşleştir

reducer

Saf fonksiyon
dispatch

Aksiyon gönderir
type

Aksiyon türü
switch

Tür eşleştirme

Sıradaki ders: useEffect nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler