Action
- React Native kursu
- İleri seviye
- Ders 58/83
- 5 dk
Zustand action tanımlamayı öğrenirsin.
Action
Zustand'da action, store içindeki bir işlevdir. State'i güncellemek için set çağrılır. Örnek: increment: () => set((s) => ({ count: s.count + 1 })). Bu işlev, bileşenlerden doğrudan çağrılır; dispatch gibi bir ara katmana gerek yoktur.
Action'lar store tanımında listelenir; her biri bir state değişikliğini temsil eder. addItem, removeItem, clear gibi işlevler oluşturabilirsin. Action, istediğin parametreyi alabilir; addItem: (item) => set((s) => ({ items: [...s.items, item] })) gibi.
Action'ı çağırma
Action'ı bileşende çağırmak için önce store hook'undan alırsın. const increment = useCounter((s) => s.increment) ile yalnızca işlevi seçebilirsin. Veya const { increment } = useCounter() ile tüm store'u alıp destructure edebilirsin. Sonra butonun onPress'inde increment() çağrılır.
Seçici ile almak, action referansı değişmediği sürece render tetiklemez. Zustand, action referanslarını sabit tutar; bu yüzden seçici ile almak güvenlidir. Butona her basışta increment() çalışır, state güncellenir ve count okuyan bileşenler yeniden render edilir.
Uygulama Increment butonu
CounterButton bileşenini tamamla. useCounter'ı ./useCounter'dan içe aktar. const increment = useCounter((s) => s.increment) ile action'ı al. Butonun onPress'inde increment() çağır.
Başlangıç kodu
import React from 'react';
import { Button } from 'react-native';
export function CounterButton() {
// increment'i seçici ile al ve onPress'te çağır
return null;
}Örnek çözüm
import React from 'react';
import { Button } from 'react-native';
import { useCounter } from './useCounter';
export function CounterButton() {
const increment = useCounter((s) => s.increment);
return (
<Button title="Artir" onPress={() => increment()} />
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Action gövdesini yaz
increment: () => ____((s) => ({ count: s.count + 1 })),increment: () => set((s) => ({ count: s.count + 1 })),Açıklama: set ile state güncellenir.
2 Action neden dispatch gerektirmez?
- Çünkü store içindeki bir işlevdir, doğrudan çağrılır
- Çünkü action hiçbir şey yapmaz
- Çünkü Zustand hook kullanmaz
- Çünkü state değişmez Doğru cevap
Açıklama: Zustand'da action doğrudan çağrılır.
3 Action parçalarını eşle
| Kavram | Anlamı |
|---|---|
increment |
Action adı |
set |
State günceller |
(s) => s.increment |
Seçici |
onPress |
Çağrı anı |