useReducer nedir?

useReducer ile state güncellemelerini bir fonksiyona taşımayı öğrenirsin.

useReducer nedir?

useReducer, karmaşık state mantığı için useState'in alternatifidir. State'i bir reducer fonksiyonuyla yönetirsin: (state, action) => newState.

useReducer, mevcut state'i ve bir aksiyon (action) alıp yeni state döndürür. Sen dispatch ile aksiyon gönderirsin; reducer gerisini halleder.

Birçok ilişkili alan veya karmaşık geçiş varsa useReducer useState'ten daha temizdir.

Reducer yapısı

Reducer, saf bir fonksiyondur: function reducer(state, action). İçinde genelde switch(action.type) ile aksiyon türüne göre yeni state döndürürsün.

Reducer hiçbir yan etkisi olmamalıdır; aynı girdi hep aynı çıktıyı verir. Bu, test edilebilirliği artırır.

Yeni state her zaman yeni bir nesnedir; eski state değiştirilmez.

Uygulama Reducer iskeleti

Aşağıdaki iskeleti tamamla. reducer adında, (state, action) parametreli bir fonksiyon tanımla; gövdesinde return state; yapsın. Sonra Counter bileşeni yaz; useReducer'ı içe aktar ve const [state, dispatch] = useReducer(reducer, 0); tanımla. <p>{state}</p> döndür. Dışa aktar.

Örnek çözümü göster

import { useReducer } from "react";

function reducer(state, action) { return state; }

function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  return <p>{state}</p>;
}

export default Counter;

Kendini test et

useReducer hangi durumlada tercih edilir?
```
For a simple value useState is enough.
```
- Hiçbir zaman
- Sadece sayı sayaçlarında
- Karmaşık state mantığında
- Sadece fetch için
Cevabı göster

Karmaşık state mantığında — Karmaşık geçişler ve ilişkili alanlar için temizdir.

useReducer nedir: eksik parçayı tamamla

const [state, dispatch] = useReducer(____, initial);

Cevabı göster

const [state, dispatch] = useReducer(reducer, initial);

useReducer nedir: kavramları eşleştir

reducer

Saf fonksiyon
dispatch

Aksiyon gönderir
action

Olay bilgisi
state

Mevcut durum

Sıradaki ders: Aksiyon ve state

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler