Özet - Zustand

create, action ve persist'i birleştirerek bir kalıcı sayaç yazarsın.

Özet - Zustand

Bu grupta Zustand, create, state okuma, action ve persist öğrendik. create store oluşturur; dönen hook'u bileşende çağırırsın. Seçici ile yalnızca ilgili alan değişince render tetiklenir. Action, set ile state günceller. persist ise state'i kalıcı yapar.

Şimdi bunları birleştirip kalıcı bir sayaç yazacağız. Store tanımı, okuma, artırma ve persist sarması birlikte gelir. Bu kalıp, Zustand ile tüm kalıcı uygulamaların iskeletidir.

Uygulama Özet - Kalıcı sayaç store'u

useCounter store'unu tanımla. persist ile sar. State: count: 0. Action: increment: () => set((s) => ({ count: s.count + 1 })). Persist name: 'counter-storage'. export const ile dışa aktar.

Örnek çözümü göster

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useCounter = create(persist((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}), { name: 'counter-storage' }));

Uygulama Özet - Sayaç bileşeni

Counter bileşenini tamamla. const count = useCounter((s) => s.count) ile değeri oku. const increment = useCounter((s) => s.increment) ile action'ı al. <Text>{count}</Text> ve artırma butonu döndür.

Örnek çözümü göster

import React from 'react';
import { Button, Text, View } from 'react-native';
import { useCounter } from './useCounter';

export function Counter() {
  const count = useCounter((s) => s.count);
  const increment = useCounter((s) => s.increment);

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Artir" onPress={() => increment()} />
    </View>
  );
}

Kendini test et

Akış parçalarını eşle

create

Store oluşturur
set

State günceller
(s) => s.count

Seçici
persist

Kalıcı yapar

Persist name değerini yaz

persist((set) => ({ count: 0 }), { name: '____' })

Cevabı göster

persist((set) => ({ count: 0 }), { name: 'counter-storage' })

Sıradaki ders: react-native-reanimated

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler