restate / v1.0.0

Başlarken

restate'i kurun, ilk değeri bileşenler arasında paylaşın ve aynı store'u React dışında kullanın.

Bu sayfada

Kurulum İlk paylaşılan durumunuz Değeri güncelleme React dışında kullanım TypeScript React Native Tüm platformlarda tek bildirim

Kurulum

restate React 16.8 ve sonrasıyla çalışır. TypeScript bildirimleri dahildir ve başka çalışma zamanı bağımlılığı yoktur.

npm install @kkwaenggwari/restate

İlk paylaşılan durumunuz

Store'u bir kez, bileşenlerin dışında oluşturun. restate'in döndürdüğü değer hem bir hook hem de set ve get gibi metotlara sahip bir nesnedir.

Editor ile CharacterCount arasında ne props ne Provider var. Birine yazmak diğerini günceller.

Ne görüyorsunuz

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

İki bileşen de aynı store'u okur. Sayaç yalnızca uzunluk değiştiğinde yeniden render edilir, çünkü text.length'i seçer.

import { restate } from '@kkwaenggwari/restate';

export const useDraft = restate('');

export function Editor() {
  const text = useDraft();
  return <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />;
}

export function CharacterCount() {
  const count = useDraft((text) => text.length);
  return <span>{count} characters</span>;
}

Değeri güncelleme

set yeni bir değer ya da önceki değerin bir fonksiyonunu alır. reset bildirdiğiniz değere döner.

Değeri değiştirilemez kabul edin: selector'ların değişikliği görmesi için eskisini değiştirmek yerine yeni bir nesne ya da dizi döndürün.

push ile cart.items'a bir öğe ekleyip useCart.set(cart) çağırıyorsunuz. Neden hiçbir şey render edilmiyor?

Store aynı nesneyi alır ve Object.is bir değişiklik görmez. Yeni bir nesne döndürün, örneğin useCart.set(cart => ({ ...cart, items: [...cart.items, item] })).

useCount.set(10); // replace the value
useCount.set((count) => count + 1); // compute from the previous value
useCount.reset(); // back to the declared initial value

React dışında kullanım

Aynı store olay işleyicilerinde, servislerde ve testlerde çalışır. get geçerli değeri okur; subscribe her değişiklikten sonra sizi çağırır ve dinlemeyi bırakan bir fonksiyon döndürür.

import { useCart } from './stores/cart';

// Any module, event handler or test can use the same store.
const current = useCart.get();
useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }));

const stop = useCart.subscribe((cart, previous) => {
  console.log(previous.items.length, '→', cart.items.length);
});
stop();

TypeScript

Durum tipini bir kez verin. Selector'lar, set ve tüm metotlar tiplerini oradan alır.

import { restate } from '@kkwaenggwari/restate';

type Cart = { items: string[]; coupon: string };

export const useCart = restate<Cart>({ items: [], coupon: '' });

const count = useCart((cart) => cart.items.length); // number
useCart.set((cart) => ({ ...cart, coupon: 'SPRING' }));

React Native

Bellek içi store'lar React Native'de başka bir şeye ihtiyaç duymaz. Durumu kaydetmek için react-native-mmkv'yi kurun; React Native giriş noktası onu otomatik yükler.

Bare projelerde kurulumdan sonra iOS için pod install çalıştırın. Expo'da development build kullanın, çünkü MMKV native bir modüldür.

npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modules

Tüm platformlarda tek bildirim

Kayıtlı bir store tarayıcıda IndexedDB, React Native'de MMKV kullanır. Bildirim ve bileşenleriniz aynı kalır.

import { persistedRestate } from '@kkwaenggwari/restate';

// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });

restate 1.0 API'si için yazıldı