restate / v1.0.0

Első lépések

Telepítse a restate-et, ossza meg az első értéket a komponensek között, és használja ugyanazt a store-t a Reacten kívül.

Ezen az oldalon

Telepítés Az első megosztott állapota Az érték frissítése Használat a Reacten kívül TypeScript React Native Egy deklaráció minden platformon

Telepítés

A restate React 16.8 és újabb verziókkal működik. A TypeScript-deklarációk a csomag részei, más futásidejű függőség nincs.

npm install @kkwaenggwari/restate

Az első megosztott állapota

Hozza létre a store-t egyszer, a komponenseken kívül. A restate által visszaadott érték egyszerre hook és olyan objektum, amelynek set és get metódusai vannak.

Az Editor és a CharacterCount között nincs sem props, sem Provider. Ha az egyikben gépel, a másik frissül.

Amit lát

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

Mindkét komponens ugyanazt a store-t olvassa. A számláló csak akkor renderel újra, ha a hossz változik, mert a text.length értéket választja ki.

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

Az érték frissítése

A set új értéket vagy az előző érték függvényét fogadja. A reset visszaáll a deklarált értékre.

Kezelje az értéket megváltoztathatatlanként: a régi módosítása helyett adjon vissza új objektumot vagy tömböt, hogy a selectorok észleljék a változást.

A push-sal hozzáad egy elemet a cart.items-hez, majd meghívja a useCart.set(cart)-ot. Miért nem renderel semmi?

A store ugyanazt az objektumot kapja, és az Object.is nem lát változást. Adjon vissza új objektumot, például 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

Ugyanaz a store működik eseménykezelőkben, szolgáltatásokban és tesztekben. A get az aktuális értéket olvassa, a subscribe pedig minden változás után meghívja Önt, és visszaad egy függvényt, amely leállítja a figyelést.

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

Adja meg egyszer az állapot típusát. A selectorok, a set és minden metódus ebből kapja a típusát.

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

A memóriabeli store-oknak React Native alatt nincs szükségük másra. Az állapot mentéséhez telepítse a react-native-mmkv csomagot; a React Native belépési pont automatikusan betölti.

Bare projektekben telepítés után futtassa a pod install parancsot iOS-re. Expóban használjon development buildet, mert az MMKV natív modul.

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

Egy deklaráció minden platformon

A mentett store böngészőben IndexedDB-t, React Native alatt MMKV-t használ. A deklaráció és a komponensek ugyanazok maradnak.

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

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

A restate 1.0 API-jához írva