restate / v1.0.0
Loslegen
Installiere restate, teile deinen ersten Wert zwischen Komponenten und nutze denselben Store außerhalb von React.
Auf dieser Seite
InstallierenDein erster geteilter StateDen Wert aktualisierenAußerhalb von React nutzenTypeScriptReact NativeEine Deklaration auf jeder PlattformInstallieren
restate funktioniert mit React 16.8 und neuer. TypeScript-Deklarationen sind enthalten, und es gibt keine weiteren Laufzeitabhängigkeiten.
npm install @kkwaenggwari/restateDein erster geteilter State
Erstelle den Store einmal, außerhalb deiner Komponenten. Was restate zurückgibt, ist zugleich ein Hook und ein Objekt mit Methoden wie set und get.
Zwischen Editor und CharacterCount gibt es weder Props noch Provider. Tippen in einer Komponente aktualisiert die andere.
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>;
}Den Wert aktualisieren
set akzeptiert einen neuen Wert oder eine Funktion des vorherigen Werts. reset kehrt zum deklarierten Wert zurück.
Behandle den Wert als unveränderlich: Gib ein neues Objekt oder Array zurück, statt das alte zu verändern, damit Selektoren die Änderung sehen.
Du machst einen push in cart.items und rufst useCart.set(cart) auf. Warum rendert nichts neu?
Der Store bekommt dasselbe Objekt, und Object.is meldet keine Änderung. Gib ein neues Objekt zurück, zum Beispiel 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 valueAußerhalb von React nutzen
Derselbe Store funktioniert in Event-Handlern, Services und Tests. get liest den aktuellen Wert, und subscribe ruft dich nach jeder Änderung auf und gibt eine Funktion zurück, die das Zuhören beendet.
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
Übergib den State-Typ einmal. Selektoren, set und jede Methode werden daraus typisiert.
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
Arbeitsspeicher-Stores brauchen unter React Native nichts weiter. Zum Speichern installierst du react-native-mmkv; der React-Native-Einstiegspunkt lädt es automatisch.
Führe bei Bare-Projekten nach der Installation pod install für iOS aus. Nutze in Expo einen development build, weil MMKV ein natives Modul ist.
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modulesEine Deklaration auf jeder Plattform
Ein gespeicherter Store nutzt im Browser IndexedDB und unter React Native MMKV. Die Deklaration und deine Komponenten bleiben gleich.
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });