Özet - useReducer kalıbı

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

Özet - useReducer kalıbı

Bu grupta reducer'ın ne olduğunu, aksiyon tiplerini, kompozisyonu ve switch yapısını öğrendin. Artık karmaşık state'leri düzenli biçimde yönetebilirsin.

Reçete: her state parçası için ayrı reducer, sabitlerle aksiyon tipleri, switch içinde type, kök reducer ile birleştirme. Bu, useState'in yetersiz kaldığı durumlarda net bir yol haritası sunar.

Bir sonraki adımda çok adımlı bir form için useReducer kullanan bir Wizard bileşeni yazacaksın.

Uygulama Wizard iskeleti

Aşağıdaki iskeleti tamamla. Wizard bileşeni yaz. useReducer(wizardReducer, { '{ step: 0, data: {} }' }) çağır; [state, dispatch] olarak çöz. <div><p>Adım: { '{ state.step }' }</p><button onClick={ '{ () => dispatch({ '{ type: "NEXT" }' }) }' }>İleri</button></div> döndür. Dışa aktar.

Örnek çözümü göster

import { useReducer } from "react";

function Wizard() {
  const [state, dispatch] = useReducer(wizardReducer, { step: 0, data: {} });
  return (
    <div>
      <p>Adım: {state.step}.</p>
      <button onClick={() => dispatch({ type: "NEXT" })}>İleri</button>
    </div>
  );
}

export default Wizard;

Kendini test et

useReducer ne zaman tercih edilir?
- Karmaşık state geçişlerinde
- Basit sayma işleminde
- CSS değişiminde
- useEffect'te
Cevabı göster

Karmaşık state geçişlerinde — Karmaşık state'lerde useReducer tercih edilir.
useReducer kalıbını eşleştir

switch

type dalı
sabit

ADD
kompozisyon

alt reducer
useReducer

[state, dispatch]

Sıradaki ders: Proje: Sepet yönetimi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler