restate / v1.0.0

Primii pași

Instalați restate, partajați prima valoare între componente și folosiți același store în afara React.

Pe această pagină

Instalare Prima dumneavoastră stare partajată Actualizarea valorii Folosire în afara React TypeScript React Native O declarație pe toate platformele

Instalare

restate funcționează cu React 16.8 și versiunile mai noi. Declarațiile TypeScript sunt incluse și nu există alte dependențe la rulare.

npm install @kkwaenggwari/restate

Prima dumneavoastră stare partajată

Creați un store o singură dată, în afara componentelor. Valoarea returnată de restate este atât un hook, cât și un obiect cu metode precum set și get.

Între Editor și CharacterCount nu există nici props, nici Provider. Tastarea într-una o actualizează pe cealaltă.

Ce vedeți

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Ambele componente citesc același store. Contorul se re-randează doar când se schimbă lungimea, pentru că selectează 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>;
}

Actualizarea valorii

set primește o valoare nouă sau o funcție de valoarea anterioară. reset revine la valoarea declarată.

Tratați valoarea ca imuabilă: returnați un obiect sau un tablou nou în loc să-l modificați pe cel vechi, ca selectorii să vadă schimbarea.

Adăugați un element în cart.items cu push și apelați useCart.set(cart). De ce nu se randează nimic?

Store-ul primește același obiect, iar Object.is nu vede nicio schimbare. Returnați un obiect nou, de exemplu 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

Același store funcționează în handlere de evenimente, servicii și teste. get citește valoarea curentă, iar subscribe vă apelează după fiecare schimbare și returnează o funcție care oprește ascultarea.

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

Dați tipul stării o singură dată. Selectorii, set și fiecare metodă își iau tipurile de acolo.

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

Store-urile în memorie nu au nevoie de nimic în plus în React Native. Pentru a salva starea, instalați react-native-mmkv; punctul de intrare React Native îl încarcă automat.

În proiectele bare, rulați pod install pentru iOS după instalare. În Expo folosiți un development build, pentru că MMKV este un modul nativ.

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

O declarație pe toate platformele

Un store salvat folosește IndexedDB în browser și MMKV în React Native. Declarația și componentele rămân aceleași.

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

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

Scris pentru API-ul restate 1.0