restate / v1.0.0
Začíname
Nainštalujte restate, zdieľajte prvú hodnotu medzi komponentmi a používajte rovnaký store mimo React.
Na tejto stránke
InštaláciaVáš prvý zdieľaný stavAktualizácia hodnotyPoužitie mimo ReactTypeScriptReact NativeJedna deklarácia na všetkých platformáchInštalácia
restate funguje s React 16.8 a novším. Deklarácie TypeScript sú súčasťou a za behu nie sú žiadne ďalšie závislosti.
npm install @kkwaenggwari/restateVáš prvý zdieľaný stav
Vytvorte store raz, mimo komponentov. Hodnota, ktorú restate vracia, je zároveň hook aj objekt s metódami ako set a get.
Medzi Editor a CharacterCount nie sú žiadne props ani Provider. Písanie v jednom aktualizuje druhý.
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>;
}Aktualizácia hodnoty
set prijíma novú hodnotu alebo funkciu predchádzajúcej hodnoty. reset sa vráti k hodnote, ktorú ste deklarovali.
Zaobchádzajte s hodnotou ako s nemennou: vracajte nový objekt alebo pole namiesto úpravy starého, aby selektory zmenu videli.
Urobíte push do cart.items a zavoláte useCart.set(cart). Prečo sa nič neprekreslí?
Store dostane rovnaký objekt a Object.is nevidí žiadnu zmenu. Vráťte nový objekt, napríklad 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 valuePoužitie mimo React
Rovnaký store funguje v obsluhách udalostí, službách aj testoch. get číta aktuálnu hodnotu a subscribe vás zavolá po každej zmene a vráti funkciu, ktorá počúvanie ukončí.
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
Typ stavu odovzdajte raz. Selektory, set a všetky metódy z neho odvodia typy.
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
Store v pamäti v React Native nič ďalšie nepotrebujú. Na ukladanie stavu nainštalujte react-native-mmkv; vstupný bod React Native ho načíta automaticky.
V bare projektoch po inštalácii spustite pod install pre iOS. V Expo použite development build, pretože MMKV je natívny modul.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesJedna deklarácia na všetkých platformách
Ukladaný store používa IndexedDB v prehliadači a MMKV v React Native. Deklarácia aj vaše komponenty zostávajú rovnaké.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });