Playground

Schimbați intrările. Vedeți cum răspunde restate.

Șapte experimente rulează pachetul real. Controlerul din stânga aparține acestui site; exemplul din dreapta primește doar props, așa că codul lui este exact ce ați scrie dumneavoastră.

Controler — doar pentru siteprops — punteaExemplu — codul pe care îl copiați

Două ecrane, un store

Mai multe componente au nevoie de aceeași valoare. Declarați-o o dată și citiți-o oriunde.

La ce să fiți atenți

Apăsați butonul de pas: toți cititorii arată noul număr în același moment.
Schimbați numărul de cititori: un cititor nou pornește de la valoarea curentă.

ControlerNu face parte din codul exemplului. Valorile ajung în exemplu ca props.

Cititorireaders
Passtep

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

Se pregătește exemplul…

Exemplele live au nevoie de JavaScript. Puteți citi codul de mai jos așa cum este.

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

Primii pași

Randați doar ce s-a schimbat

Un store mare nu ar trebui să re-randeze toate componentele la fiecare schimbare.

La ce să fiți atenți

Editați cardul: se randează doar cardul store-ului întreg.
Adăugați un produs: se randează produsele și rezumatul; cardul cuponului rămâne pe loc.
Dezactivați shallow: rezumatul se randează la fiecare schimbare, pentru că selectorul lui returnează un obiect nou de fiecare dată.

ControlerNu face parte din codul exemplului. Valorile ajung în exemplu ca props.

Compară rezumatul cu shallowshallowSummary

<Example
  shallowSummary={true}
/>

Se pregătește exemplul…

Exemplele live au nevoie de JavaScript. Puteți citi codul de mai jos așa cum este.

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>{`Randări: ${renders.current}`}</small>
    </section>
  );
}

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

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

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Store întreg" 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'] }))}>
          Adaugă produs
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Comută cuponul
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Editează cardul
        </button>
      </div>
    </main>
  );
}

Abonați-vă doar la ce vă trebuie

Multe modificări, o notificare

Actualizarea a două store-uri una după alta poate lăsa un abonat să vadă o stare pe jumătate gata.

La ce să fiți atenți

Golire separată: abonatul vede 0 produse alături de cuponul vechi.
Golire cu batch: abonatul rulează o dată, după ce s-au schimbat ambele store-uri.

ControlerNu face parte din codul exemplului. Valorile ajung în exemplu ca props.

Produsequantity
Cuponcoupon

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

Se pregătește exemplul…

Exemplele live au nevoie de JavaScript. Puteți citi codul de mai jos așa cum este.

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

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

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Produse</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Cupon</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Golește separat</button>
        <button onClick={() => batch(clear)}>Golește cu batch</button>
      </div>
      <h2>Ce a văzut abonatul</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Încă nicio notificare.</li>
        )}
      </ol>
    </main>
  );
}

Abonați-vă doar la ce vă trebuie

Salvați când decideți

Editarea schimbă memoria. Salvarea este o acțiune explicită, iar statusul arată ce se întâmplă.

La ce să fiți atenți

Tastați: dirty se activează și încă nu se scrie nimic.
Măriți întârzierea și salvați: operation arată save cât durează scrierea.
Redați din nou: ciorna salvată se restaurează din IndexedDB.

ControlerNu face parte din codul exemplului. Valorile ajung în exemplu ca props.

Întârzierea stocăriilatency

<Example
  latency={600}
/>

Se pregătește exemplul…

Exemplele live au nevoie de JavaScript. Puteți citi codul de mai jos așa cum este.

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>
        Ciornă
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Salvează
        </button>
        <button disabled={!dirty} onClick={revert}>
          Renunță la modificări
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'modificări nesalvate' : 'salvat'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'niciuna'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'încă nu'}</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);
  },
};

Salvați când decideți

Tastați repede, scrieți o dată

Salvarea la fiecare tastă inundă stocarea. autoSave așteaptă o pauză.

La ce să fiți atenți

Tastați o propoziție: modificările cresc repede, iar scrierile cresc cu una după fiecare pauză.
Alegeți „La fiecare modificare”: fiecare modificare se scrie, iar revenirea la valoarea salvată nu scrie nimic.

ControlerNu face parte din codul exemplului. Valorile ajung în exemplu ca props.

Așteptarea autoSavedelayMs

<Example
  delayMs={800}
/>

Se pregătește exemplul…

Exemplele live au nevoie de JavaScript. Puteți citi codul de mai jos așa cum este.

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>
        Notă
        <textarea
          value={note}
          placeholder="Tastați repede o propoziție…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Modificări</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Scrieri în stocare</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>
        {dirty ? 'se așteaptă o pauză' : 'salvat'}
      </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);
  },
};

Salvați când decideți

Laborator de defecte

Faceți stocarea lentă, defectă sau indisponibilă și vedeți cum restate vă păstrează datele și raportează problema.

La ce să fiți atenți

Măriți întârzierea și salvați de trei ori: cererile împart o singură scriere, așa că pending rămâne 1 și toate trei rezultatele sosesc împreună.
Activați scrierile eșuate și salvați: dirty rămâne true, iar error arată cauza.
Faceți stocarea indisponibilă: salvarea e respinsă cu STORAGE_UNAVAILABLE, dar editarea continuă.

ControlerNu face parte din codul exemplului. Valorile ajung în exemplu ca props.

Întârzierelatency
Scrieri eșuatefailWrites
Stocare indisponibilăunavailable

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

Se pregătește exemplul…

Exemplele live au nevoie de JavaScript. Puteți citi codul de mai jos așa cum este.

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

  return (
    <main>
      <label>
        Notă
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>Salvează</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Salvează de trei ori
        </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>Rezultate</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('Discul este plin');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Fiabil prin design

Stare per document

Fiecare document deschis are nevoie de propria stare, eliberată când documentul se închide.

La ce să fiți atenți

Tastați în documentul A, apoi în B: fiecare își păstrează textul.
Închideți documentul A și deschideți-l din nou: pornește gol, pentru că scope-ul său a fost distrus.

ControlerNu face parte din codul exemplului. Valorile ajung în exemplu ca props.

Documentedocuments
Documentul A este deschisfirstOpen

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

Se pregătește exemplul…

Exemplele live au nevoie de JavaScript. Puteți citi codul de mai jos așa cum este.

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="Scris doar aici"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} caractere`}</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={`Documentul ${name}`} />,
        )}
      </div>
    </main>
  );
}

Stare care aparține unei componente