restate / v1.0.0
Kom igång
Installera restate, dela ditt första värde mellan komponenter och använd samma store utanför React.
På den här sidan
InstalleraDitt första delade stateUppdatera värdetAnvänd utanför ReactTypeScriptReact NativeEn deklaration på alla plattformarInstallera
restate fungerar med React 16.8 och senare. TypeScript-deklarationer ingår och det finns inga andra beroenden vid körning.
npm install @kkwaenggwari/restateDitt första delade state
Skapa storen en gång, utanför komponenterna. Värdet som restate returnerar är både en hook och ett objekt med metoder som set och get.
Det finns inga props och ingen Provider mellan Editor och CharacterCount. Att skriva i den ena uppdaterar den andra.
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>;
}Uppdatera värdet
set tar ett nytt värde eller en funktion av det föregående. reset går tillbaka till värdet du deklarerade.
Behandla värdet som oföränderligt: returnera ett nytt objekt eller en ny array i stället för att ändra det gamla, så att selektorer ser förändringen.
Du gör push till cart.items och anropar useCart.set(cart). Varför renderas ingenting om?
Storen får samma objekt och Object.is ser ingen förändring. Returnera ett nytt objekt, till exempel 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 valueAnvänd utanför React
Samma store fungerar i händelsehanterare, tjänster och tester. get läser det aktuella värdet, och subscribe anropar dig efter varje ändring och returnerar en funktion som slutar lyssna.
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
Ange state-typen en gång. Selektorer, set och varje metod får sina typer från den.
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
Stores i minnet behöver inget mer i React Native. För att spara state installerar du react-native-mmkv; React Natives startpunkt läser in det automatiskt.
Kör pod install för iOS efter installationen i bare-projekt. Använd en development build i Expo, eftersom MMKV är en native-modul.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesEn deklaration på alla plattformar
En sparad store använder IndexedDB i webbläsaren och MMKV i React Native. Deklarationen och dina komponenter förblir desamma.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });