Playground

Ändere die Eingaben. Sieh zu, wie restate reagiert.

Sieben Experimente führen das echte Paket aus. Der Controller links gehört zu dieser Website; das Beispiel rechts bekommt nur Props, sein Code ist also genau das, was du schreiben würdest.

Controller — nur für die Websiteprops — die BrückeBeispiel — der Code, den du kopierst

Zwei Bildschirme, ein Store

Mehrere Komponenten brauchen denselben Wert. Deklariere ihn einmal und lies ihn überall.

Worauf du achten solltest

Drück den Schritt-Button: Alle Leser zeigen gleichzeitig die neue Zahl.
Ändere die Zahl der Leser: Ein neuer Leser startet beim aktuellen Wert.

ControllerGehört nicht zum Beispielcode. Die Werte erreichen das Beispiel als Props.

Leserreaders
Schrittstep

<Example
  readers={3}
  step={1}
/>

Beispiel wird vorbereitet…

Live-Beispiele brauchen JavaScript. Der Code unten lässt sich so lesen.

App.jsx

import { restate } from '@kkwaenggwari/restate';
import './styles.css';

const useCount = restate(0);

function Reader({ name }) {
  const count = useCount();

  return (
    <section className="card">
      <span>{name}</span>
      <output>{count}</output>
    </section>
  );
}

export default function Example({ readers = 3, step = 1 }) {
  return (
    <main>
      <div className="grid">
        {Array.from({ length: readers }, (_, index) => (
          <Reader key={index} name={`Bildschirm ${index + 1}`} />
        ))}
      </div>
      <div className="actions">
        <button onClick={() => useCount.set((count) => count + step)}>+{step}</button>
        <button onClick={() => useCount.reset()}>Zurücksetzen</button>
      </div>
    </main>
  );
}

Loslegen

Nur rendern, was sich geändert hat

Ein großer Store sollte nicht bei jeder Änderung jede Komponente neu rendern.

Worauf du achten solltest

Nachricht bearbeiten: Nur die Karte mit dem ganzen Store rendert.
Artikel hinzufügen: Artikel und Zusammenfassung rendern; die Gutschein-Karte bleibt ruhig.
Schalte shallow aus: Die Zusammenfassung rendert bei jeder Änderung, weil ihr selector jedes Mal ein neues Objekt zurückgibt.

ControllerGehört nicht zum Beispielcode. Die Werte erreichen das Beispiel als Props.

Zusammenfassung mit shallow vergleichenshallowSummary

<Example
  shallowSummary={true}
/>

Beispiel wird vorbereitet…

Live-Beispiele brauchen JavaScript. Der Code unten lässt sich so lesen.

App.jsx

import { memo, useRef } from 'react';
import { restate, shallow } from '@kkwaenggwari/restate';
import './styles.css';

const useCart = restate({ items: ['Book'], coupon: '', note: '' });

function Card({ title, value }) {
  const renders = useRef(0);
  renders.current += 1;

  return (
    <section className="card">
      <span>{title}</span>
      <output>{value}</output>
      <small>{`${renders.current} Renders`}</small>
    </section>
  );
}

const ItemCount = memo(function ItemCount() {
  const count = useCart((cart) => cart.items.length);
  return <Card title="Artikel" value={count} />;
});

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="Gutschein" value={coupon || 'keine'} />;
});

const Summary = memo(function Summary({ compare }) {
  const summary = useCart((cart) => ({ count: cart.items.length, coupon: cart.coupon }), compare);
  return <Card title="Zusammenfassung" value={`${summary.count} · ${summary.coupon || '-'}`} />;
});

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Ganzer Store" value={cart.note.length} />;
});

export default function Example({ shallowSummary = true }) {
  return (
    <main>
      <div className="grid">
        <ItemCount />
        <Coupon />
        <Summary compare={shallowSummary ? shallow : undefined} />
        <Whole />
      </div>
      <div className="actions">
        <button onClick={() => useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }))}>
          Artikel hinzufügen
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Gutschein umschalten
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Nachricht bearbeiten
        </button>
      </div>
    </main>
  );
}

Nur abonnieren, was du brauchst

Viele Änderungen, eine Benachrichtigung

Zwei Stores nacheinander zu aktualisieren lässt einen Abonnenten einen halbfertigen Zustand sehen.

Worauf du achten solltest

Getrennt leeren: Der Abonnent sieht 0 Artikel zusammen mit dem alten Gutschein.
Mit batch leeren: Der Abonnent läuft einmal, nachdem sich beide Stores geändert haben.

ControllerGehört nicht zum Beispielcode. Die Werte erreichen das Beispiel als Props.

Artikelquantity
Gutscheincoupon

<Example
  quantity={3}
  coupon="SPRING"
/>

Beispiel wird vorbereitet…

Live-Beispiele brauchen JavaScript. Der Code unten lässt sich so lesen.

App.jsx

import { useEffect, useState } from 'react';
import { batch, restate } from '@kkwaenggwari/restate';
import './styles.css';

const useItems = restate([]);
const useCoupon = restate('');

export default function Example({ quantity = 3, coupon = 'SPRING' }) {
  const items = useItems();
  const code = useCoupon();
  const [notices, setNotices] = useState([]);

  useEffect(() => {
    useItems.set(Array.from({ length: quantity }, (_, index) => `#${index + 1}`));
    useCoupon.set(coupon);
    setNotices([]);
  }, [quantity, coupon]);

  useEffect(
    () =>
      useItems.subscribe((next) => {
        const notice = `Benachrichtigt: ${next.length} Artikel · Gutschein ${useCoupon.get() || '-'}`;
        setNotices((list) => [...list, notice]);
      }),
    [],
  );

  const clear = () => {
    useItems.set([]);
    useCoupon.set('');
  };

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Artikel</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Gutschein</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Getrennt leeren</button>
        <button onClick={() => batch(clear)}>Mit batch leeren</button>
      </div>
      <h2>Was der Abonnent gesehen hat</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Noch keine Benachrichtigungen.</li>
        )}
      </ol>
    </main>
  );
}

Nur abonnieren, was du brauchst

Speichern, wann du willst

Bearbeiten ändert den Arbeitsspeicher. Speichern ist eine explizite Aktion, und der Status zeigt, was gerade passiert.

Worauf du achten solltest

Tippen: dirty schaltet sich ein, geschrieben wird noch nichts.
Latenz erhöhen und speichern: operation zeigt save, solange der Schreibvorgang läuft.
Erneut abspielen: Der gespeicherte Entwurf wird aus IndexedDB wiederhergestellt.

ControllerGehört nicht zum Beispielcode. Die Werte erreichen das Beispiel als Props.

Speicherlatenzlatency

<Example
  latency={600}
/>

Beispiel wird vorbereitet…

Live-Beispiele brauchen JavaScript. Der Code unten lässt sich so lesen.

App.jsx

import { useEffect } from 'react';
import { persistedRestate } from '@kkwaenggwari/restate';
import { settings, slowStorage } from './storage.js';
import './styles.css';

const useDraft = persistedRestate('', { key: 'playground-draft', storage: slowStorage });

export default function Example({ latency = 600 }) {
  useEffect(() => {
    settings.latency = latency;
  }, [latency]);

  const text = useDraft();
  const { dirty, operation, pending, lastSavedAt } = useDraft.useStatus();
  // A failed save keeps dirty and records status.error.
  const save = () => useDraft.save().catch(() => {});
  const revert = () => useDraft.restore().catch(() => {});

  return (
    <main>
      <label>
        Entwurf
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Speichern
        </button>
        <button disabled={!dirty} onClick={revert}>
          Verwerfen
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>
          {dirty ? 'ungespeicherte Änderungen' : 'gespeichert'}
        </dd>
        <dt>operation</dt>
        <dd>{operation ?? 'keine'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'noch nicht'}</dd>
      </dl>
    </main>
  );
}

storage.js

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

// IndexedDB with an adjustable delay, to watch operations in progress.
const indexedDB = createIndexedDBStorage();
export const settings = { latency: 0 };
const wait = () => new Promise((resolve) => setTimeout(resolve, settings.latency));

export const slowStorage = {
  async getItem(key) {
    await wait();
    return indexedDB.getItem(key);
  },
  async setItem(key, value) {
    await wait();
    return indexedDB.setItem(key, value);
  },
  async removeItem(key) {
    await wait();
    return indexedDB.removeItem(key);
  },
};

Speichern, wann du willst

Schnell tippen, einmal schreiben

Bei jedem Tastendruck zu speichern überflutet den Speicher. autoSave wartet auf eine Pause.

Worauf du achten solltest

Tipp einen Satz: Die Änderungen steigen schnell, die Schreibvorgänge wachsen nach jeder Pause nur um eins.
Wähle „Bei jeder Änderung“: Jede Änderung schreibt, aber eine Rückkehr zum gespeicherten Wert schreibt nichts.

ControllerGehört nicht zum Beispielcode. Die Werte erreichen das Beispiel als Props.

autoSave-VerzögerungdelayMs

<Example
  delayMs={800}
/>

Beispiel wird vorbereitet…

Live-Beispiele brauchen JavaScript. Der Code unten lässt sich so lesen.

App.jsx

import { useState } from 'react';
import { persistedRestate, useRestateScope } from '@kkwaenggwari/restate';
import { countingStorage, useWrites } from './storage.js';
import './styles.css';

function Note({ delayMs }) {
  const useNote = useRestateScope((scope) =>
    persistedRestate('', {
      scope,
      key: 'note',
      storage: countingStorage,
      autoSave: delayMs ? { delayMs } : true,
    }),
  );
  const note = useNote();
  const dirty = useNote.useStatus((status) => status.dirty);
  const writes = useWrites();
  const [edits, setEdits] = useState(0);

  return (
    <>
      <label>
        Notiz
        <textarea
          value={note}
          placeholder="Tipp schnell einen Satz…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Änderungen</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Schreibvorgänge im Speicher</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>
        {dirty ? 'wartet auf eine Pause' : 'gespeichert'}
      </p>
    </>
  );
}

export default function Example({ delayMs = 800 }) {
  // autoSave is part of the declaration: a new delay starts a new scope.
  return (
    <main>
      <Note key={delayMs} delayMs={delayMs} />
    </main>
  );
}

storage.js

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

// An in-memory storage adapter that counts real writes.
const records = new Map();
export const useWrites = restate(0);

export const countingStorage = {
  getItem: (key) => records.get(key) ?? null,
  setItem: (key, value) => {
    records.set(key, value);
    useWrites.set((count) => count + 1);
  },
  removeItem: (key) => {
    records.delete(key);
  },
};

Speichern, wann du willst

Fehlerlabor

Mach den Speicher langsam, fehlerhaft oder unverfügbar und sieh zu, wie restate deine Daten behält und das Problem meldet.

Worauf du achten solltest

Latenz erhöhen und dreimal speichern: Die Anfragen teilen sich einen Schreibvorgang, daher bleibt pending bei 1 und alle drei Ergebnisse kommen zusammen an.
Fehlschlagende Schreibvorgänge einschalten und speichern: dirty bleibt true und error zeigt die Ursache.
Speicher unverfügbar machen: Speichern wird mit STORAGE_UNAVAILABLE abgelehnt, während das Bearbeiten weiter funktioniert.

ControllerGehört nicht zum Beispielcode. Die Werte erreichen das Beispiel als Props.

Latenzlatency
Schreiben fehlschlagen lassenfailWrites
Speicher nicht verfügbarunavailable

<Example
  latency={700}
  failWrites={false}
  unavailable={false}
/>

Beispiel wird vorbereitet…

Live-Beispiele brauchen JavaScript. Der Code unten lässt sich so lesen.

App.jsx

import { useEffect, useState } from 'react';
import { persistedRestate } from '@kkwaenggwari/restate';
import { flakyStorage, settings } from './storage.js';
import './styles.css';

const useNote = persistedRestate('', { key: 'lab-note', storage: flakyStorage });

export default function Example({ latency = 700, failWrites = false, unavailable = false }) {
  useEffect(() => {
    Object.assign(settings, { latency, failWrites, unavailable });
  }, [latency, failWrites, unavailable]);

  const note = useNote();
  const { dirty, operation, pending, error } = useNote.useStatus();
  const [results, setResults] = useState([]);

  const save = () =>
    useNote.save().then(
      (value) => setResults((list) => [`Gespeichert: ${JSON.stringify(value)}`, ...list]),
      (reason) =>
        setResults((list) => [`Fehlgeschlagen: ${reason.code ?? reason.message}`, ...list]),
    );

  return (
    <main>
      <label>
        Notiz
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>Speichern</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Dreimal speichern
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{String(dirty)}</dd>
        <dt>operation</dt>
        <dd>{operation ?? '-'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>error</dt>
        <dd className={error ? 'bad' : ''}>{error ? (error.code ?? error.message) : '-'}</dd>
      </dl>
      <h2>Ergebnisse</h2>
      <ol className="log">
        {results.length ? (
          results.map((result, index) => <li key={results.length - index}>{result}</li>)
        ) : (
          <li>-</li>
        )}
      </ol>
    </main>
  );
}

storage.js

// A storage adapter whose speed and failures you can change.
const records = new Map();
export const settings = { latency: 0, failWrites: false, unavailable: false };
const wait = () => new Promise((resolve) => setTimeout(resolve, settings.latency));

export const flakyStorage = {
  isAvailable: () => !settings.unavailable,
  async getItem(key) {
    await wait();
    return records.get(key) ?? null;
  },
  async setItem(key, value) {
    await wait();
    if (settings.failWrites) throw new Error('Der Datenträger ist voll');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Zuverlässigkeit by Design

State pro Dokument

Jedes geöffnete Dokument braucht eigenen State, der beim Schließen des Dokuments freigegeben wird.

Worauf du achten solltest

Tipp in Dokument A, dann in B: Jedes behält seinen eigenen Text.
Schließ Dokument A und öffne es wieder: Es startet leer, weil sein Scope zerstört wurde.

ControllerGehört nicht zum Beispielcode. Die Werte erreichen das Beispiel als Props.

Dokumentedocuments
Dokument A geöffnetfirstOpen

<Example
  documents={2}
  firstOpen={true}
/>

Beispiel wird vorbereitet…

Live-Beispiele brauchen JavaScript. Der Code unten lässt sich so lesen.

App.jsx

import { restate, useRestateScope } from '@kkwaenggwari/restate';
import './styles.css';

function Document({ name }) {
  const useText = useRestateScope((scope) => restate('', { scope }));
  const text = useText();

  return (
    <section className="card">
      <span>{name}</span>
      <input
        value={text}
        placeholder="Nur hier getippt"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} Zeichen`}</small>
    </section>
  );
}

export default function Example({ documents = 2, firstOpen = true }) {
  const names = ['A', 'B', 'C'].slice(0, documents);

  return (
    <main>
      <div className="grid">
        {names.map((name, index) =>
          index === 0 && !firstOpen ? null : <Document key={name} name={`Dokument ${name}`} />,
        )}
      </div>
    </main>
  );
}

State, der einer Komponente gehört