restate / v1.0.0
Aloittaminen
Asenna restate, jaa ensimmäinen arvo komponenttien välillä ja käytä samaa storea Reactin ulkopuolella.
Tällä sivulla
AsennusEnsimmäinen jaettu tilasiArvon päivittäminenKäyttö Reactin ulkopuolellaTypeScriptReact NativeYksi määrittely kaikilla alustoillaAsennus
restate toimii React 16.8:n ja uudempien kanssa. TypeScript-tyyppimäärittelyt sisältyvät, eikä muita ajonaikaisia riippuvuuksia ole.
npm install @kkwaenggwari/restateEnsimmäinen jaettu tilasi
Luo store kerran, komponenttien ulkopuolella. restaten palauttama arvo on sekä hook että objekti, jolla on metodit kuten set ja get.
Editorin ja CharacterCountin välillä ei ole propseja eikä Provideria. Kirjoittaminen toiseen päivittää toisen.
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>;
}Arvon päivittäminen
set ottaa uuden arvon tai edellisen arvon funktion. reset palaa määrittelemääsi arvoon.
Käsittele arvoa muuttumattomana: palauta uusi objekti tai taulukko vanhan muokkaamisen sijaan, jotta selectorit näkevät muutoksen.
Lisäät kohteen cart.items-taulukkoon pushilla ja kutsut useCart.set(cart). Miksi mitään ei renderöidy?
Store saa saman objektin, eikä Object.is näe muutosta. Palauta uusi objekti, esimerkiksi 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 valueKäyttö Reactin ulkopuolella
Sama store toimii tapahtumankäsittelijöissä, palveluissa ja testeissä. get lukee nykyisen arvon, ja subscribe kutsuu sinua jokaisen muutoksen jälkeen ja palauttaa funktion, joka lopettaa kuuntelun.
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
Anna tilan tyyppi kerran. Selectorit, set ja jokainen metodi saavat tyyppinsä siitä.
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
Muistissa olevat storet eivät tarvitse React Nativessa mitään muuta. Tilan tallentamiseksi asenna react-native-mmkv; React Nativen aloituspiste lataa sen automaattisesti.
Bare-projekteissa aja asennuksen jälkeen pod install iOS:lle. Expossa käytä development buildia, koska MMKV on natiivimoduuli.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesYksi määrittely kaikilla alustoilla
Tallennettu store käyttää selaimessa IndexedDB:tä ja React Nativessa MMKV:tä. Määrittely ja komponenttisi pysyvät samoina.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });