Lekeplass

Endre inndata. Se hvordan restate svarer.

Sju eksperimenter kjører den ekte pakken. Kontrolleren til venstre hører til dette nettstedet; eksempelet til høyre får bare props, så koden er nøyaktig den du selv ville skrevet.

Kontroller — bare for nettstedetprops — broenEksempel — koden du kopierer

To skjermer, én store

Flere komponenter trenger den samme verdien. Deklarer den én gang og les den hvor som helst.

Hva du skal se etter

Trykk på stegknappen: alle leserne viser det nye tallet i samme øyeblikk.
Endre antall lesere: en ny leser starter fra gjeldende verdi.

KontrollerIkke en del av eksempelkoden. Verdiene når eksempelet som props.

Leserereaders
Stegstep

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

Forbereder eksempelet …

Live-eksempler krever JavaScript. Koden nedenfor kan leses som den er.

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

Kom i gang

Render bare det som endret seg

En stor store bør ikke rendere alle komponenter på nytt ved hver endring.

Hva du skal se etter

Rediger kortet: bare kortet for hele storen renderes.
Legg til en vare: varer og sammendrag renderes; rabattkortet står stille.
Slå av shallow: sammendraget renderes ved hver endring, fordi selectoren returnerer et nytt objekt hver gang.

KontrollerIkke en del av eksempelkoden. Verdiene når eksempelet som props.

Sammenlign sammendraget med shallowshallowSummary

<Example
  shallowSummary={true}
/>

Forbereder eksempelet …

Live-eksempler krever JavaScript. Koden nedenfor kan leses som den er.

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} renderinger`}</small>
    </section>
  );
}

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

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

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Hele storen" 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'] }))}>
          Legg til vare
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Slå rabattkode av/på
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Rediger kort
        </button>
      </div>
    </main>
  );
}

Abonner bare på det du trenger

Mange endringer, ett varsel

Å oppdatere to stores én om gangen lar en abonnent se en halvferdig tilstand.

Hva du skal se etter

Tøm hver for seg: abonnenten ser 0 varer sammen med den gamle rabattkoden.
Tøm med batch: abonnenten kjøres én gang, etter at begge stores er endret.

KontrollerIkke en del av eksempelkoden. Verdiene når eksempelet som props.

Varerquantity
Rabattkodecoupon

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

Forbereder eksempelet …

Live-eksempler krever JavaScript. Koden nedenfor kan leses som den er.

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

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

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Varer</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Rabattkode</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Tøm hver for seg</button>
        <button onClick={() => batch(clear)}>Tøm med batch</button>
      </div>
      <h2>Hva abonnenten så</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Ingen varsler ennå.</li>
        )}
      </ol>
    </main>
  );
}

Abonner bare på det du trenger

Lagre når du bestemmer

Redigering endrer minnet. Lagring er en eksplisitt handling, og statusen viser hva som skjer.

Hva du skal se etter

Skriv: dirty slås på, og ingenting skrives ennå.
Øk forsinkelsen og lagre: operation viser save mens skrivingen pågår.
Spill av igjen: det lagrede utkastet gjenopprettes fra IndexedDB.

KontrollerIkke en del av eksempelkoden. Verdiene når eksempelet som props.

Lagringsforsinkelselatency

<Example
  latency={600}
/>

Forbereder eksempelet …

Live-eksempler krever JavaScript. Koden nedenfor kan leses som den er.

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>
        Utkast
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Lagre
        </button>
        <button disabled={!dirty} onClick={revert}>
          Forkast endringer
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'ulagrede endringer' : 'lagret'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'ingen'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'ikke ennå'}</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);
  },
};

Lagre når du bestemmer

Skriv raskt, skriv én gang

Å lagre ved hvert tastetrykk oversvømmer lagringen. autoSave venter på en pause.

Hva du skal se etter

Skriv en setning: endringene stiger raskt, mens skrivingene øker med én etter hver pause.
Velg «Ved hver endring»: hver endring skriver, men å gå tilbake til den lagrede verdien skriver ingenting.

KontrollerIkke en del av eksempelkoden. Verdiene når eksempelet som props.

Ventetid for autoSavedelayMs

<Example
  delayMs={800}
/>

Forbereder eksempelet …

Live-eksempler krever JavaScript. Koden nedenfor kan leses som den er.

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>
        Notat
        <textarea
          value={note}
          placeholder="Skriv en setning raskt …"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Endringer</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Skrivinger til lagringen</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>{dirty ? 'venter på en pause' : 'lagret'}</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);
  },
};

Lagre når du bestemmer

Feillaboratorium

Gjør lagringen treg, ødelagt eller utilgjengelig, og se hvordan restate tar vare på dataene og melder fra om problemet.

Hva du skal se etter

Øk forsinkelsen og lagre tre ganger: forespørslene deler én skriving, så pending blir stående på 1 og de tre resultatene kommer samtidig.
Slå på feilende skrivinger og lagre: dirty forblir true, og error viser årsaken.
Gjør lagringen utilgjengelig: lagring avvises med STORAGE_UNAVAILABLE mens redigering fortsatt fungerer.

KontrollerIkke en del av eksempelkoden. Verdiene når eksempelet som props.

Forsinkelselatency
La skrivinger feilefailWrites
Lagring utilgjengeligunavailable

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

Forbereder eksempelet …

Live-eksempler krever JavaScript. Koden nedenfor kan leses som den er.

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

  return (
    <main>
      <label>
        Notat
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>Lagre</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Lagre tre ganger
        </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>Resultater</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('Disken er full');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Pålitelighet by design

State per dokument

Hvert åpne dokument trenger sin egen state, som frigjøres når dokumentet lukkes.

Hva du skal se etter

Skriv i dokument A og så i B: hvert beholder sin egen tekst.
Lukk dokument A og åpne det igjen: det starter tomt, fordi scopet ble ødelagt.

KontrollerIkke en del av eksempelkoden. Verdiene når eksempelet som props.

Dokumenterdocuments
Dokument A åpentfirstOpen

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

Forbereder eksempelet …

Live-eksempler krever JavaScript. Koden nedenfor kan leses som den er.

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="Skrevet bare her"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} tegn`}</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 som hører til en komponent