Playground

Cambia las entradas. Mira cómo responde restate.

Siete experimentos ejecutan el paquete real. El controlador de la izquierda pertenece a este sitio; el ejemplo de la derecha solo recibe props, así que su código es exactamente lo que escribirías tú.

Controlador — solo del sitio webprops — el puenteEjemplo — el código que copias

Dos pantallas, un store

Varios componentes necesitan el mismo valor. Decláralo una vez y léelo en cualquier sitio.

Qué observar

Pulsa el botón de paso: todos los lectores muestran el nuevo número a la vez.
Cambia el número de lectores: un lector nuevo empieza desde el valor actual.

ControladorNo forma parte del código del ejemplo. Los valores llegan al ejemplo como props.

Lectoresreaders
Pasostep

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

Preparando el ejemplo…

Los ejemplos en vivo necesitan JavaScript. El código de abajo se puede leer tal cual.

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

Empezar

Renderiza solo lo que cambió

Un store grande no debería volver a renderizar todos los componentes en cada cambio.

Qué observar

Editar nota: solo se renderiza la tarjeta del store completo.
Añadir artículo: se renderizan artículos y resumen; la tarjeta del cupón no se mueve.
Desactiva shallow: el resumen se renderiza en cada cambio, porque su selector devuelve un objeto nuevo cada vez.

ControladorNo forma parte del código del ejemplo. Los valores llegan al ejemplo como props.

Comparar el resumen con shallowshallowSummary

<Example
  shallowSummary={true}
/>

Preparando el ejemplo…

Los ejemplos en vivo necesitan JavaScript. El código de abajo se puede leer tal cual.

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

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

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Store completo" 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'] }))}>
          Añadir artículo
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Alternar cupón
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Editar nota
        </button>
      </div>
    </main>
  );
}

Suscríbete solo a lo que necesitas

Muchos cambios, una notificación

Actualizar dos stores uno tras otro deja que un suscriptor vea un estado a medio terminar.

Qué observar

Vaciar por separado: el suscriptor ve 0 artículos junto con el cupón antiguo.
Vaciar con batch: el suscriptor se ejecuta una vez, después de que cambiaron ambos stores.

ControladorNo forma parte del código del ejemplo. Los valores llegan al ejemplo como props.

Artículosquantity
Cupóncoupon

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

Preparando el ejemplo…

Los ejemplos en vivo necesitan JavaScript. El código de abajo se puede leer tal cual.

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 = `Notificado: ${next.length} artículos · cupón ${useCoupon.get() || '-'}`;
        setNotices((list) => [...list, notice]);
      }),
    [],
  );

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

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Artículos</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Cupón</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Vaciar por separado</button>
        <button onClick={() => batch(clear)}>Vaciar con batch</button>
      </div>
      <h2>Lo que vio el suscriptor</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Todavía no hay notificaciones.</li>
        )}
      </ol>
    </main>
  );
}

Suscríbete solo a lo que necesitas

Guarda cuando tú decidas

Editar cambia la memoria. Guardar es una acción explícita, y el estado muestra qué está pasando.

Qué observar

Escribe: dirty se activa y todavía no se escribe nada.
Sube la latencia y guarda: operation muestra save mientras dura la escritura.
Vuelve a reproducir: el borrador guardado se restaura desde IndexedDB.

ControladorNo forma parte del código del ejemplo. Los valores llegan al ejemplo como props.

Latencia del almacenamientolatency

<Example
  latency={600}
/>

Preparando el ejemplo…

Los ejemplos en vivo necesitan JavaScript. El código de abajo se puede leer tal cual.

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>
        Borrador
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Guardar
        </button>
        <button disabled={!dirty} onClick={revert}>
          Revertir
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'cambios sin guardar' : 'guardado'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'ninguna'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'todavía no'}</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);
  },
};

Guarda cuando tú decidas

Escribe rápido, guarda una vez

Guardar en cada pulsación satura el almacenamiento. autoSave espera a una pausa.

Qué observar

Escribe una frase: las ediciones suben rápido mientras las escrituras crecen de una en una tras cada pausa.
Elige «Cada cambio»: cada edición escribe, pero volver al valor guardado no escribe nada.

ControladorNo forma parte del código del ejemplo. Los valores llegan al ejemplo como props.

Espera de autoSavedelayMs

<Example
  delayMs={800}
/>

Preparando el ejemplo…

Los ejemplos en vivo necesitan JavaScript. El código de abajo se puede leer tal cual.

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>
        Nota
        <textarea
          value={note}
          placeholder="Escribe una frase rápido…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Ediciones</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Escrituras en el almacenamiento</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>
        {dirty ? 'esperando una pausa' : 'guardado'}
      </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);
  },
};

Guarda cuando tú decidas

Laboratorio de fallos

Haz que el almacenamiento sea lento, falle o no esté disponible, y mira cómo restate conserva tus datos e informa del problema.

Qué observar

Sube la latencia y guarda tres veces: las solicitudes comparten una escritura, así que pending se queda en 1 y los tres resultados llegan juntos.
Activa los fallos de escritura y guarda: dirty sigue en true y error muestra la causa.
Haz que el almacenamiento no esté disponible: guardar se rechaza con STORAGE_UNAVAILABLE mientras la edición sigue funcionando.

ControladorNo forma parte del código del ejemplo. Los valores llegan al ejemplo como props.

Latencialatency
Fallar escriturasfailWrites
Almacenamiento no disponibleunavailable

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

Preparando el ejemplo…

Los ejemplos en vivo necesitan JavaScript. El código de abajo se puede leer tal cual.

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

  return (
    <main>
      <label>
        Nota
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>Guardar</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Guardar tres veces
        </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>Resultados</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('El disco está lleno');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Fiabilidad por diseño

Estado por documento

Cada documento abierto necesita su propio estado, que se libera al cerrar el documento.

Qué observar

Escribe en el documento A y luego en el B: cada uno conserva su propio texto.
Cierra el documento A y vuelve a abrirlo: empieza vacío, porque su scope se destruyó.

ControladorNo forma parte del código del ejemplo. Los valores llegan al ejemplo como props.

Documentosdocuments
Documento A abiertofirstOpen

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

Preparando el ejemplo…

Los ejemplos en vivo necesitan JavaScript. El código de abajo se puede leer tal cual.

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="Escrito solo aquí"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} caracteres`}</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={`Documento ${name}`} />,
        )}
      </div>
    </main>
  );
}

Estado que pertenece a un componente