restate / v1.0.0

Aan de slag

Installeer restate, deel je eerste waarde tussen componenten en gebruik dezelfde store buiten React.

Op deze pagina

Installeren Je eerste gedeelde state De waarde bijwerken Gebruik buiten React TypeScript React Native Eén declaratie op elk platform

Installeren

restate werkt met React 16.8 en nieuwer. TypeScript-declaraties zijn inbegrepen en er zijn geen andere runtime-afhankelijkheden.

npm install @kkwaenggwari/restate

Je eerste gedeelde state

Maak de store één keer aan, buiten de componenten. De waarde die restate teruggeeft is zowel een hook als een object met methoden als set en get.

Er zitten geen props en geen Provider tussen Editor en CharacterCount. Typen in de ene werkt de andere bij.

Wat je ziet

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Beide componenten lezen dezelfde store. De teller rendert alleen opnieuw als de lengte verandert, omdat hij text.length selecteert.

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

De waarde bijwerken

set accepteert een nieuwe waarde of een functie van de vorige. reset gaat terug naar de waarde die je declareerde.

Behandel de waarde als onveranderlijk: geef een nieuw object of nieuwe array terug in plaats van het oude te wijzigen, zodat selectors de verandering zien.

Je doet een push in cart.items en roept useCart.set(cart) aan. Waarom rendert er niets?

De store krijgt hetzelfde object en Object.is ziet geen verandering. Geef een nieuw object terug, bijvoorbeeld 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

Gebruik buiten React

Dezelfde store werkt in event handlers, services en tests. get leest de huidige waarde, en subscribe roept je na elke wijziging aan en geeft een functie terug die stopt met luisteren.

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

Geef het state-type één keer door. Selectors, set en elke methode krijgen daar hun types van.

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 in het geheugen hebben in React Native niets extra's nodig. Om state op te slaan installeer je react-native-mmkv; het React Native-toegangspunt laadt het automatisch.

Voer in bare projecten na de installatie pod install uit voor iOS. Gebruik in Expo een development build, want MMKV is een native module.

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

Eén declaratie op elk platform

Een opgeslagen store gebruikt IndexedDB in de browser en MMKV in React Native. De declaratie en je componenten blijven hetzelfde.

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

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

Geschreven voor de API van restate 1.0