Speeltuin

Verander de invoer. Kijk hoe restate reageert.

Zeven experimenten draaien het echte pakket. De controller links hoort bij deze site; het voorbeeld rechts krijgt alleen props, dus de code is precies wat jij zou schrijven.

Controller — alleen van de siteprops — de brugVoorbeeld — de code die je kopieert

Twee schermen, één store

Meerdere componenten hebben dezelfde waarde nodig. Declareer hem één keer en lees hem overal.

Waar je op let

Druk op de stapknop: alle lezers tonen op hetzelfde moment het nieuwe getal.
Verander het aantal lezers: een nieuwe lezer begint bij de huidige waarde.

ControllerGeen onderdeel van de voorbeeldcode. Waarden komen als props in het voorbeeld.

Lezersreaders
Stapstep

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

Voorbeeld voorbereiden…

Live voorbeelden hebben JavaScript nodig. De code hieronder is gewoon te lezen.

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={`Scherm ${index + 1}`} />
        ))}
      </div>
      <div className="actions">
        <button onClick={() => useCount.set((count) => count + step)}>+{step}</button>
        <button onClick={() => useCount.reset()}>Herstellen</button>
      </div>
    </main>
  );
}

Aan de slag

Render alleen wat veranderde

Een grote store mag niet bij elke bewerking elk component opnieuw renderen.

Waar je op let

Bewerk de kaart: alleen de kaart van de hele store rendert.
Voeg een artikel toe: artikelen en overzicht renderen; de couponkaart blijft stil.
Zet shallow uit: het overzicht rendert bij elke bewerking, omdat de selector elke keer een nieuw object teruggeeft.

ControllerGeen onderdeel van de voorbeeldcode. Waarden komen als props in het voorbeeld.

Vergelijk het overzicht met shallowshallowSummary

<Example
  shallowSummary={true}
/>

Voorbeeld voorbereiden…

Live voorbeelden hebben JavaScript nodig. De code hieronder is gewoon te lezen.

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="Artikelen" value={count} />;
});

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

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Hele 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 toevoegen
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Coupon aan/uit
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Kaart bewerken
        </button>
      </div>
    </main>
  );
}

Abonneer je alleen op wat je nodig hebt

Veel wijzigingen, één melding

Twee stores na elkaar bijwerken laat een abonnee een halve toestand zien.

Waar je op let

Los legen: de abonnee ziet 0 artikelen samen met de oude coupon.
Legen met batch: de abonnee draait één keer, nadat beide stores zijn veranderd.

ControllerGeen onderdeel van de voorbeeldcode. Waarden komen als props in het voorbeeld.

Artikelenquantity
Couponcoupon

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

Voorbeeld voorbereiden…

Live voorbeelden hebben JavaScript nodig. De code hieronder is gewoon te lezen.

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 = `Gemeld: ${next.length} artikelen · coupon ${useCoupon.get() || '-'}`;
        setNotices((list) => [...list, notice]);
      }),
    [],
  );

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

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Artikelen</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Coupon</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Los legen</button>
        <button onClick={() => batch(clear)}>Legen met batch</button>
      </div>
      <h2>Wat de abonnee zag</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Nog geen meldingen.</li>
        )}
      </ol>
    </main>
  );
}

Abonneer je alleen op wat je nodig hebt

Sla op wanneer jij besluit

Bewerken verandert het geheugen. Opslaan is een expliciete actie, en de status toont wat er gebeurt.

Waar je op let

Typ: dirty gaat aan en er wordt nog niets geschreven.
Verhoog de vertraging en sla op: operation toont save terwijl er wordt geschreven.
Speel opnieuw af: het opgeslagen concept wordt teruggezet uit IndexedDB.

ControllerGeen onderdeel van de voorbeeldcode. Waarden komen als props in het voorbeeld.

Opslagvertraginglatency

<Example
  latency={600}
/>

Voorbeeld voorbereiden…

Live voorbeelden hebben JavaScript nodig. De code hieronder is gewoon te lezen.

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>
        Concept
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Opslaan
        </button>
        <button disabled={!dirty} onClick={revert}>
          Bewerkingen verwerpen
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>
          {dirty ? 'niet-opgeslagen bewerkingen' : 'opgeslagen'}
        </dd>
        <dt>operation</dt>
        <dd>{operation ?? 'geen'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'nog niet'}</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);
  },
};

Sla op wanneer jij besluit

Typ snel, schrijf één keer

Opslaan bij elke toetsaanslag overspoelt de opslag. autoSave wacht op een pauze.

Waar je op let

Typ een zin: bewerkingen lopen snel op, terwijl schrijfacties na elke pauze met één groeien.
Kies „Bij elke bewerking”: elke bewerking schrijft, maar terug naar de opgeslagen waarde schrijft niets.

ControllerGeen onderdeel van de voorbeeldcode. Waarden komen als props in het voorbeeld.

Wachttijd van autoSavedelayMs

<Example
  delayMs={800}
/>

Voorbeeld voorbereiden…

Live voorbeelden hebben JavaScript nodig. De code hieronder is gewoon te lezen.

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>
        Notitie
        <textarea
          value={note}
          placeholder="Typ snel een zin…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Bewerkingen</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Schrijfacties naar opslag</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>
        {dirty ? 'wacht op een pauze' : 'opgeslagen'}
      </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);
  },
};

Sla op wanneer jij besluit

Storingslab

Maak de opslag traag, kapot of onbeschikbaar en zie hoe restate je gegevens bewaart en het probleem meldt.

Waar je op let

Verhoog de vertraging en sla drie keer op: de verzoeken delen één schrijfactie, dus pending blijft op 1 en de drie resultaten komen samen binnen.
Laat schrijfacties mislukken en sla op: dirty blijft true en error toont de oorzaak.
Maak de opslag onbeschikbaar: opslaan wordt geweigerd met STORAGE_UNAVAILABLE terwijl bewerken blijft werken.

ControllerGeen onderdeel van de voorbeeldcode. Waarden komen als props in het voorbeeld.

Vertraginglatency
Schrijfacties laten mislukkenfailWrites
Opslag niet beschikbaarunavailable

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

Voorbeeld voorbereiden…

Live voorbeelden hebben JavaScript nodig. De code hieronder is gewoon te lezen.

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) => [`Opgeslagen: ${JSON.stringify(value)}`, ...list]),
      (reason) => setResults((list) => [`Mislukt: ${reason.code ?? reason.message}`, ...list]),
    );

  return (
    <main>
      <label>
        Notitie
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>Opslaan</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Drie keer opslaan
        </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>Resultaten</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('De schijf is vol');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Betrouwbaarheid by design

State per document

Elk open document heeft eigen state nodig, die vrijkomt als het document sluit.

Waar je op let

Typ in document A en dan in B: elk houdt zijn eigen tekst.
Sluit document A en open het opnieuw: het begint leeg, omdat de scope is vernietigd.

ControllerGeen onderdeel van de voorbeeldcode. Waarden komen als props in het voorbeeld.

Documentendocuments
Document A geopendfirstOpen

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

Voorbeeld voorbereiden…

Live voorbeelden hebben JavaScript nodig. De code hieronder is gewoon te lezen.

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="Alleen hier geschreven"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} tekens`}</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={`Document ${name}`} />,
        )}
      </div>
    </main>
  );
}

State die bij een component hoort