Legeplads

Ændr input. Se, hvordan restate svarer.

Syv eksperimenter kører den rigtige pakke. Controlleren til venstre hører til dette site; eksemplet til højre får kun props, så dets kode er præcis den, du selv ville skrive.

Controller — kun til sitetprops — broenEksempel — koden, du kopierer

To skærme, én store

Flere komponenter har brug for den samme værdi. Erklær den én gang, og læs den hvor som helst.

Det skal du holde øje med

Tryk på trinknappen: alle læsere viser det nye tal i samme øjeblik.
Ændr antallet af læsere: en ny læser starter fra den aktuelle værdi.

ControllerIkke en del af eksempelkoden. Værdierne når eksemplet som props.

Læserereaders
Trinstep

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

Forbereder eksemplet…

Liveeksempler kræver JavaScript. Koden nedenfor kan læses, 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={`Skærm ${index + 1}`} />
        ))}
      </div>
      <div className="actions">
        <button onClick={() => useCount.set((count) => count + step)}>+{step}</button>
        <button onClick={() => useCount.reset()}>Nulstil</button>
      </div>
    </main>
  );
}

Kom i gang

Render kun det, der ændrede sig

En stor store bør ikke rendere alle komponenter igen ved hver ændring.

Det skal du holde øje med

Redigér kortet: kun kortet for hele storen renderes.
Tilføj en vare: varer og oversigt renderes; rabatkortet står stille.
Slå shallow fra: oversigten renderes ved hver ændring, fordi dens selector returnerer et nyt objekt hver gang.

ControllerIkke en del af eksempelkoden. Værdierne når eksemplet som props.

Sammenlign oversigten med shallowshallowSummary

<Example
  shallowSummary={true}
/>

Forbereder eksemplet…

Liveeksempler kræver JavaScript. Koden nedenfor kan læses, 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="Rabatkode" value={coupon || 'ingen'} />;
});

const Summary = memo(function Summary({ compare }) {
  const summary = useCart((cart) => ({ count: cart.items.length, coupon: cart.coupon }), compare);
  return <Card title="Oversigt" 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'] }))}>
          Tilføj vare
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Slå rabatkode til/fra
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Redigér kort
        </button>
      </div>
    </main>
  );
}

Abonnér kun på det, du har brug for

Mange ændringer, én notifikation

At opdatere to stores én ad gangen lader en abonnent se en halvfærdig tilstand.

Det skal du holde øje med

Tøm hver for sig: abonnenten ser 0 varer sammen med den gamle rabatkode.
Tøm med batch: abonnenten kører én gang, efter at begge stores er ændret.

ControllerIkke en del af eksempelkoden. Værdierne når eksemplet som props.

Varerquantity
Rabatkodecoupon

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

Forbereder eksemplet…

Liveeksempler kræver JavaScript. Koden nedenfor kan læses, 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 = `Notificeret: ${next.length} varer · rabatkode ${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>Rabatkode</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Tøm hver for sig</button>
        <button onClick={() => batch(clear)}>Tøm med batch</button>
      </div>
      <h2>Hvad abonnenten så</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Ingen notifikationer endnu.</li>
        )}
      </ol>
    </main>
  );
}

Abonnér kun på det, du har brug for

Gem, når du beslutter det

At redigere ændrer hukommelsen. At gemme er en eksplicit handling, og status viser, hvad der sker.

Det skal du holde øje med

Skriv: dirty slås til, og intet skrives endnu.
Hæv forsinkelsen, og gem: operation viser save, mens der skrives.
Afspil igen: den gemte kladde gendannes fra IndexedDB.

ControllerIkke en del af eksempelkoden. Værdierne når eksemplet som props.

Lagerforsinkelselatency

<Example
  latency={600}
/>

Forbereder eksemplet…

Liveeksempler kræver JavaScript. Koden nedenfor kan læses, 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>
        Kladde
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Gem
        </button>
        <button disabled={!dirty} onClick={revert}>
          Kassér ændringer
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'ikke-gemte ændringer' : 'gemt'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'ingen'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'ikke endnu'}</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);
  },
};

Gem, når du beslutter det

Skriv hurtigt, skriv én gang

At gemme ved hvert tastetryk oversvømmer lageret. autoSave venter på en pause.

Det skal du holde øje med

Skriv en sætning: ændringerne stiger hurtigt, mens skrivningerne vokser med én efter hver pause.
Vælg »Ved hver ændring«: hver ændring skriver, men at gå tilbage til den gemte værdi skriver ingenting.

ControllerIkke en del af eksempelkoden. Værdierne når eksemplet som props.

Ventetid for autoSavedelayMs

<Example
  delayMs={800}
/>

Forbereder eksemplet…

Liveeksempler kræver JavaScript. Koden nedenfor kan læses, 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>
        Note
        <textarea
          value={note}
          placeholder="Skriv en sætning hurtigt…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Ændringer</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Skrivninger til lageret</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>{dirty ? 'venter på en pause' : 'gemt'}</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);
  },
};

Gem, når du beslutter det

Fejllaboratorium

Gør lageret langsomt, i stykker eller utilgængeligt, og se, hvordan restate bevarer dine data og melder problemet.

Det skal du holde øje med

Hæv forsinkelsen, og gem tre gange: anmodningerne deler én skrivning, så pending bliver på 1, og de tre resultater kommer samtidig.
Slå fejlende skrivninger til, og gem: dirty forbliver true, og error viser årsagen.
Gør lageret utilgængeligt: gem afvises med STORAGE_UNAVAILABLE, mens redigering stadig virker.

ControllerIkke en del af eksempelkoden. Værdierne når eksemplet som props.

Forsinkelselatency
Lad skrivninger fejlefailWrites
Lager utilgængeligtunavailable

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

Forbereder eksemplet…

Liveeksempler kræver JavaScript. Koden nedenfor kan læses, 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) => [`Gemt: ${JSON.stringify(value)}`, ...list]),
      (reason) => setResults((list) => [`Mislykkedes: ${reason.code ?? reason.message}`, ...list]),
    );

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

Pålidelighed by design

State pr. dokument

Hvert åbent dokument har brug for sin egen state, som frigives, når dokumentet lukkes.

Det skal du holde øje med

Skriv i dokument A og derefter i B: hver beholder sin egen tekst.
Luk dokument A, og åbn det igen: det starter tomt, fordi dets scope blev nedlagt.

ControllerIkke en del af eksempelkoden. Værdierne når eksemplet som props.

Dokumenterdocuments
Dokument A åbentfirstOpen

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

Forbereder eksemplet…

Liveeksempler kræver JavaScript. Koden nedenfor kan læses, 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="Kun skrevet 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, der hører til en komponent