restate / v1.0.0

Početak

Instalirajte restate, podijelite prvu vrijednost između komponenti i koristite isti store izvan Reacta.

Na ovoj stranici

Instalacija Vaše prvo dijeljeno stanje Ažuriranje vrijednosti Upotreba izvan Reacta TypeScript React Native Jedna deklaracija na svim platformama

Instalacija

restate radi s Reactom 16.8 i novijim. TypeScript deklaracije su uključene i nema drugih ovisnosti tijekom izvođenja.

npm install @kkwaenggwari/restate

Vaše prvo dijeljeno stanje

Stvorite store jednom, izvan komponenti. Vrijednost koju restate vraća istodobno je hook i objekt s metodama poput set i get.

Između Editor i CharacterCount nema ni props ni Providera. Tipkanje u jednom ažurira drugi.

Što vidite

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Obje komponente čitaju isti store. Brojač se ponovno renderira samo kad se promijeni duljina jer odabire text.length.

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>;
}

Ažuriranje vrijednosti

set prima novu vrijednost ili funkciju prethodne. reset se vraća na vrijednost koju ste deklarirali.

Tretirajte vrijednost kao nepromjenjivu: vratite novi objekt ili niz umjesto mijenjanja staroga, kako bi selektori vidjeli promjenu.

Dodate element pomoću push u cart.items i pozovete useCart.set(cart). Zašto se ništa ne renderira?

Store dobiva isti objekt i Object.is ne vidi promjenu. Vratite novi objekt, primjerice 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

Upotreba izvan Reacta

Isti store radi u rukovateljima događaja, servisima i testovima. get čita trenutačnu vrijednost, a subscribe vas poziva nakon svake promjene i vraća funkciju koja prestaje slušati.

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

Predajte tip stanja jednom. Selektori, set i sve metode iz njega dobivaju tipove.

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

Storeovima u memoriji u React Nativeu ne treba ništa više. Za spremanje stanja instalirajte react-native-mmkv; ulazna točka React Nativea učitava ga automatski.

U bare projektima nakon instalacije pokrenite pod install za iOS. U Expou koristite development build jer je MMKV nativni modul.

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

Jedna deklaracija na svim platformama

Spremljeni store koristi IndexedDB u pregledniku i MMKV u React Nativeu. Deklaracija i vaše komponente ostaju iste.

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

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

Napisano za API restate 1.0