restate / v1.0.0
Kom i gang
Installér restate, del din første værdi mellem komponenter, og brug den samme store uden for React.
På denne side
InstallérDin første delte stateOpdatér værdienBrug uden for ReactTypeScriptReact NativeÉn erklæring på alle platformeInstallér
restate virker med React 16.8 og nyere. TypeScript-deklarationer medfølger, og der er ingen andre afhængigheder ved kørsel.
npm install @kkwaenggwari/restateDin første delte state
Opret storen én gang uden for komponenterne. Værdien, som restate returnerer, er både en hook og et objekt med metoder som set og get.
Der er ingen props og ingen Provider mellem Editor og CharacterCount. At skrive i den ene opdaterer den anden.
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>;
}Opdatér værdien
set tager en ny værdi eller en funktion af den forrige. reset går tilbage til den værdi, du erklærede.
Behandl værdien som uforanderlig: returnér et nyt objekt eller array i stedet for at ændre det gamle, så selectorer ser ændringen.
Du laver push til cart.items og kalder useCart.set(cart). Hvorfor renderes intet igen?
Storen får det samme objekt, og Object.is ser ingen ændring. Returnér et nyt 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 valueBrug uden for React
Den samme store virker i event handlers, services og tests. get læser den aktuelle værdi, og subscribe kalder dig efter hver ændring og returnerer en funktion, der stopper med at 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
Angiv state-typen én gang. Selectorer, set og alle metoder får deres typer 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 hukommelsen behøver ikke mere i React Native. For at gemme state installerer du react-native-mmkv; React Natives indgangspunkt indlæser det automatisk.
Kør pod install til iOS efter installationen i bare-projekter. Brug en development build i Expo, fordi MMKV er et native-modul.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesÉn erklæring på alle platforme
En gemt store bruger IndexedDB i browseren og MMKV i React Native. Erklæringen og dine komponenter forbliver de samme.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });