restate / v1.0.0
Začínáme
Nainstalujte restate, sdílejte první hodnotu mezi komponentami a používejte stejný store mimo React.
Na této stránce
InstalaceVáš první sdílený stavAktualizace hodnotyPoužití mimo ReactTypeScriptReact NativeJedna deklarace na všech platformáchInstalace
restate funguje s React 16.8 a novějším. Deklarace TypeScript jsou součástí a za běhu nejsou žádné další závislosti.
npm install @kkwaenggwari/restateVáš první sdílený stav
Vytvořte store jednou, mimo komponenty. Hodnota, kterou restate vrací, je zároveň hook i objekt s metodami jako set a get.
Mezi Editor a CharacterCount nejsou žádné props ani Provider. Psaní v jedné aktualizuje druhou.
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>;
}Aktualizace hodnoty
set přijímá novou hodnotu nebo funkci předchozí hodnoty. reset se vrátí k hodnotě, kterou jste deklarovali.
Zacházejte s hodnotou jako s neměnnou: vracejte nový objekt nebo pole místo úpravy starého, aby selektory změnu viděly.
Uděláte push do cart.items a zavoláte useCart.set(cart). Proč se nic nepřekreslí?
Store dostane stejný objekt a Object.is nevidí žádnou změnu. Vraťte nový objekt, napří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žití mimo React
Stejný store funguje v obsluhách událostí, službách i testech. get čte aktuální hodnotu a subscribe vás zavolá po každé změně a vrátí funkci, která poslouchání 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 předejte jednou. Selektory, set a všechny metody z něj odvodí 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
Story v paměti v React Native nic dalšího nepotřebují. Pro ukládání stavu nainstalujte react-native-mmkv; vstupní bod React Native ho načte automaticky.
V bare projektech po instalaci spusťte pod install pro iOS. V Expo použijte development build, protože MMKV je nativní modul.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesJedna deklarace na všech platformách
Ukládaný store používá IndexedDB v prohlížeči a MMKV v React Native. Deklarace i vaše komponenty zůstávají stejné.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });