Aksiyon ve state

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.

Örnek çözümü göster

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;

Kendini test et

Bir aksiyon en az hangi alanı taşır?
```
type matches in the reducer switch.
```
- payload
- value
- id
- type
Cevabı göster

type — type aksiyonun türünü söyler.

Aksiyon ve state: eksik parçayı tamamla

case "increment": return state + ____;

Cevabı göster

case "increment": return state + 1;

Aksiyon ve state: kavramları eşleştir

dispatch({type})

Aksiyon gönder
switch(action.type)

Tür eşleştirme
case "x"

Bir durum
return state

Varsayılan

Sıradaki ders: useState vs useReducer

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler