Özet - useReducer

reducer, dispatch ve initial state'i birleştirerek bir alışveriş sepeti yazarsın.

Özet - useReducer

Bu grupta useReducer'ı öğrendin. reducer state'i hesaplayan saf fonksiyondur, dispatch action gönderir, initial state başlangıç değeridir. Bunları birleştirerek karmaşık state'i yönetirsin.

Şimdi bir alışveriş sepeti yazacaksın: reducer, sepete ürün ekleme action'ını işler; dispatch butondan çağrılır. Bu, gerçek dünyada useReducer'ın en sık kullanıldığı senaryolardan biridir. Önce reducer'ı, sonra bileşeni yazacaksın; sonunda çalışan bir sepet ortaya çıkacak.

Uygulama Sepet reducer'ı yaz

Bir cartReducer fonksiyonu yaz. state bir dizi olsun (ürünler). switch (action.type) ile "add" case'inde [...state, action.payload] döndür. default dalında state döndür.

Örnek çözümü göster

function cartReducer(state, action) {
  switch (action.type) {
    case "add":
      return [...state, action.payload];
    default:
      return state;
  }
}

Uygulama Sepet bileşeni yaz

Bir Cart bileşeni yaz. useReducer'ı cartReducer ve [] initial state ile çağır. Bir butona basıldığında dispatch({ type: "add", payload: "Elma" }) çağrılsın. Bileşen <Text>{state.length}</Text> döndürsün.

Örnek çözümü göster

import { useReducer } from "react";
import { Button, Text } from "react-native";

function cartReducer(state, action) {
  switch (action.type) {
    case "add":
      return [...state, action.payload];
    default:
      return state;
  }
}

function Cart() {
  const [state, dispatch] = useReducer(cartReducer, []);
  return (
    <>
      <Button onPress={() => dispatch({ type: "add", payload: "Elma" })} title="Ekle" />
      <Text>{state.length}</Text>
    </>
  );
}

Kendini test et

useReducer hangi durumda uygundur?
```
const [state, dispatch] = useReducer(reducer, initialState);
```
- Karmaşık state geçişlerinde
- Stil verisinde
- AsyncStorage'da
- Navigasyonda
Cevabı göster

Karmaşık state geçişlerinde — useReducer karmaşık state geçişleri için uygundur.
Parçayı rolüne eşle

reducer

State'i hesaplar
dispatch

Action gönderir
initialState

Başlangıç değeri
action.payload

Ek veri

useReducer'ı çağır

const [state, dispatch] = ____(cartReducer, []);

Cevabı göster

const [state, dispatch] = useReducer(cartReducer, []);

Sıradaki ders: Controlled form

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler