Lekplats

Ändra indata. Se hur restate svarar.

Sju experiment kör det riktiga paketet. Kontrollern till vänster hör till den här webbplatsen; exemplet till höger får bara props, så koden är exakt den du själv skulle skriva.

Kontroller — bara för webbplatsenprops — bronExempel — koden du kopierar

Två skärmar, en store

Flera komponenter behöver samma värde. Deklarera det en gång och läs det var som helst.

Vad du ska titta efter

Tryck på stegknappen: alla läsare visar det nya talet i samma ögonblick.
Ändra antalet läsare: en ny läsare börjar från det aktuella värdet.

KontrollerInte en del av exempelkoden. Värdena når exemplet som props.

Läsarereaders
Stegstep

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

Förbereder exemplet…

Liveexempel kräver JavaScript. Koden nedan går att läsa som den är.

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()}>Återställ</button>
      </div>
    </main>
  );
}

Kom igång

Rendera bara det som ändrats

En stor store ska inte rendera om varje komponent vid varje ändring.

Vad du ska titta efter

Redigera kortet: bara kortet för hela storen renderas.
Lägg till en artikel: artiklar och sammanfattning renderas; rabattkortet står still.
Stäng av shallow: sammanfattningen renderas vid varje ändring, eftersom dess selector returnerar ett nytt objekt varje gång.

KontrollerInte en del av exempelkoden. Värdena når exemplet som props.

Jämför sammanfattningen med shallowshallowSummary

<Example
  shallowSummary={true}
/>

Förbereder exemplet…

Liveexempel kräver JavaScript. Koden nedan går att läsa som den är.

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

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

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

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Hela 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'] }))}>
          Lägg till artikel
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Slå på/av rabattkod
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Redigera kort
        </button>
      </div>
    </main>
  );
}

Prenumerera bara på det du behöver

Många ändringar, en avisering

Att uppdatera två stores en i taget låter en prenumerant se ett halvfärdigt tillstånd.

Vad du ska titta efter

Töm separat: prenumeranten ser 0 artiklar tillsammans med den gamla rabattkoden.
Töm med batch: prenumeranten körs en gång, efter att båda stores har ändrats.

KontrollerInte en del av exempelkoden. Värdena når exemplet som props.

Artiklarquantity
Rabattkodcoupon

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

Förbereder exemplet…

Liveexempel kräver JavaScript. Koden nedan går att läsa som den är.

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

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

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Artiklar</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Rabattkod</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Töm separat</button>
        <button onClick={() => batch(clear)}>Töm med batch</button>
      </div>
      <h2>Vad prenumeranten såg</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Inga aviseringar än.</li>
        )}
      </ol>
    </main>
  );
}

Prenumerera bara på det du behöver

Spara när du bestämmer

Att redigera ändrar minnet. Att spara är en explicit handling, och statusen visar vad som pågår.

Vad du ska titta efter

Skriv: dirty slås på och ingenting skrivs än.
Öka fördröjningen och spara: operation visar save medan skrivningen pågår.
Spela igen: det sparade utkastet återställs från IndexedDB.

KontrollerInte en del av exempelkoden. Värdena når exemplet som props.

Lagringsfördröjninglatency

<Example
  latency={600}
/>

Förbereder exemplet…

Liveexempel kräver JavaScript. Koden nedan går att läsa som den är.

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}>
          Spara
        </button>
        <button disabled={!dirty} onClick={revert}>
          Kasta ändringar
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'osparade ändringar' : 'sparat'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'ingen'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'inte än'}</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);
  },
};

Spara när du bestämmer

Skriv snabbt, skriv en gång

Att spara vid varje tangenttryck översvämmar lagringen. autoSave väntar på en paus.

Vad du ska titta efter

Skriv en mening: ändringarna stiger snabbt, medan skrivningarna ökar med en efter varje paus.
Välj ”Vid varje ändring”: varje ändring skrivs, men att gå tillbaka till det sparade värdet skriver ingenting.

KontrollerInte en del av exempelkoden. Värdena når exemplet som props.

Väntetid för autoSavedelayMs

<Example
  delayMs={800}
/>

Förbereder exemplet…

Liveexempel kräver JavaScript. Koden nedan går att läsa som den är.

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>
        Anteckning
        <textarea
          value={note}
          placeholder="Skriv en mening snabbt…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Ändringar</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Skrivningar till lagringen</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>{dirty ? 'väntar på en paus' : 'sparat'}</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);
  },
};

Spara när du bestämmer

Fellabb

Gör lagringen långsam, trasig eller otillgänglig och se hur restate behåller din data och rapporterar problemet.

Vad du ska titta efter

Öka fördröjningen och spara tre gånger: begärandena delar en skrivning, så pending stannar på 1 och de tre resultaten kommer tillsammans.
Slå på misslyckade skrivningar och spara: dirty förblir true och error visar orsaken.
Gör lagringen otillgänglig: sparandet avvisas med STORAGE_UNAVAILABLE medan redigeringen fortsätter att fungera.

KontrollerInte en del av exempelkoden. Värdena når exemplet som props.

Fördröjninglatency
Låt skrivningar misslyckasfailWrites
Lagring otillgängligunavailable

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

Förbereder exemplet…

Liveexempel kräver JavaScript. Koden nedan går att läsa som den är.

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

  return (
    <main>
      <label>
        Anteckning
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>Spara</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Spara tre gånger
        </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>Resultat</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 är full');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Tillförlitlighet by design

State per dokument

Varje öppet dokument behöver eget state, som släpps när dokumentet stängs.

Vad du ska titta efter

Skriv i dokument A och sedan i B: vart och ett behåller sin egen text.
Stäng dokument A och öppna det igen: det börjar tomt, eftersom dess scope förstördes.

KontrollerInte en del av exempelkoden. Värdena når exemplet som props.

Dokumentdocuments
Dokument A öppetfirstOpen

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

Förbereder exemplet…

Liveexempel kräver JavaScript. Koden nedan går att läsa som den är.

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="Skrivet bara här"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} tecken`}</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 tillhör en komponent