restate / v1.0.0
Kom i gang
Installer restate, del den første verdien mellom komponenter og bruk den samme storen utenfor React.
På denne siden
InstallerDin første delte stateOppdater verdienBruk utenfor ReactTypeScriptReact NativeÉn deklarasjon på alle plattformerInstaller
restate fungerer med React 16.8 og nyere. TypeScript-deklarasjoner følger med, og det finnes ingen andre avhengigheter ved kjøring.
npm install @kkwaenggwari/restateDin første delte state
Opprett storen én gang, utenfor komponentene. Verdien restate returnerer, er både en hook og et objekt med metoder som set og get.
Det finnes verken props eller Provider mellom Editor og CharacterCount. Skriving i den ene oppdaterer den andre.
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>;
}Oppdater verdien
set tar en ny verdi eller en funksjon av den forrige. reset går tilbake til verdien du deklarerte.
Behandle verdien som uforanderlig: returner et nytt objekt eller en ny array i stedet for å endre det gamle, slik at selektorer ser endringen.
Du gjør push til cart.items og kaller useCart.set(cart). Hvorfor renderes ingenting på nytt?
Storen får det samme objektet, og Object.is ser ingen endring. Returner et nytt objekt, for eksempel 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 valueBruk utenfor React
Den samme storen fungerer i hendelseshåndterere, tjenester og tester. get leser gjeldende verdi, og subscribe kaller deg etter hver endring og returnerer en funksjon som slutter å lytte.
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
Angi state-typen én gang. Selektorer, set og alle metoder får typene sine derfra.
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 trenger ikke noe mer i React Native. For å lagre state installerer du react-native-mmkv; inngangspunktet til React Native laster det automatisk.
Kjør pod install for iOS etter installasjonen i bare-prosjekter. Bruk en development build i Expo, fordi MMKV er en native-modul.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesÉn deklarasjon på alle plattformer
En lagret store bruker IndexedDB i nettleseren og MMKV i React Native. Deklarasjonen og komponentene dine forblir de samme.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });