restate / v1.0.0

Začetek

Namestite restate, delite prvo vrednost med komponentami in uporabite isti store zunaj Reacta.

Na tej strani

Namestitev Vaše prvo skupno stanje Posodobitev vrednosti Uporaba zunaj Reacta TypeScript React Native Ena deklaracija na vseh platformah

Namestitev

restate deluje z Reactom 16.8 in novejšim. Deklaracije TypeScript so priložene, drugih odvisnosti med izvajanjem ni.

npm install @kkwaenggwari/restate

Vaše prvo skupno stanje

Store ustvarite enkrat, zunaj komponent. Vrednost, ki jo vrne restate, je hkrati hook in objekt z metodami, kot sta set in get.

Med Editor in CharacterCount ni ne props ne Providerja. Tipkanje v eni posodobi drugo.

Kaj vidite

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Obe komponenti bereta isti store. Števec se znova upodobi le, ko se spremeni dolžina, ker izbere text.length.

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>;
}

Posodobitev vrednosti

set sprejme novo vrednost ali funkcijo prejšnje. reset se vrne na vrednost, ki ste jo deklarirali.

Vrednost obravnavajte kot nespremenljivo: vrnite nov objekt ali polje, namesto da spreminjate starega, da bodo selektorji videli spremembo.

Z push dodate element v cart.items in pokličete useCart.set(cart). Zakaj se nič ne upodobi?

Store dobi isti objekt in Object.is ne vidi spremembe. Vrnite nov objekt, na primer 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 value

Uporaba zunaj Reacta

Isti store deluje v obravnavah dogodkov, storitvah in testih. get prebere trenutno vrednost, subscribe pa vas pokliče po vsaki spremembi in vrne funkcijo, ki preneha poslušati.

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

Tip stanja podajte enkrat. Selektorji, set in vse metode iz njega dobijo tipe.

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

Storeji v pomnilniku v React Nativu ne potrebujejo ničesar več. Za shranjevanje stanja namestite react-native-mmkv; vstopna točka React Nativa ga naloži samodejno.

V projektih bare po namestitvi zaženite pod install za iOS. V Expu uporabite development build, ker je MMKV domorodni modul.

npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modules

Ena deklaracija na vseh platformah

Shranjen store uporablja IndexedDB v brskalniku in MMKV v React Nativu. Deklaracija in vaše komponente ostanejo enake.

import { persistedRestate } from '@kkwaenggwari/restate';

// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });

Napisano za API restate 1.0