Playground

Ubah input. Lihat bagaimana restate merespons.

Tujuh percobaan menjalankan paket sungguhan. Pengontrol di kiri milik situs ini; contoh di kanan hanya menerima props, jadi kodenya persis seperti yang akan Anda tulis sendiri.

Pengontrol — hanya untuk situsprops — jembatanContoh — kode yang Anda salin

Dua layar, satu store

Beberapa komponen membutuhkan nilai yang sama. Deklarasikan sekali dan baca di mana saja.

Yang perlu diperhatikan

Tekan tombol langkah: setiap pembaca menampilkan angka baru pada saat yang sama.
Ubah jumlah pembaca: pembaca baru mulai dari nilai saat ini.

PengontrolBukan bagian dari kode contoh. Nilainya masuk ke contoh sebagai props.

Pembacareaders
Langkahstep

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

Menyiapkan contoh…

Contoh langsung memerlukan JavaScript. Kode di bawah bisa Anda baca apa adanya.

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

Memulai

Render hanya yang berubah

Store besar tidak semestinya merender ulang setiap komponen pada setiap perubahan.

Yang perlu diperhatikan

Edit kartu: hanya kartu seluruh store yang dirender.
Tambah produk: produk dan ringkasan dirender; kartu kupon tetap diam.
Matikan shallow: ringkasan dirender pada setiap perubahan karena selector-nya mengembalikan objek baru setiap kali.

PengontrolBukan bagian dari kode contoh. Nilainya masuk ke contoh sebagai props.

Bandingkan ringkasan dengan shallowshallowSummary

<Example
  shallowSummary={true}
/>

Menyiapkan contoh…

Contoh langsung memerlukan JavaScript. Kode di bawah bisa Anda baca apa adanya.

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

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

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

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Seluruh store" 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'] }))}>
          Tambah produk
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Ganti kupon
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Edit kartu
        </button>
      </div>
    </main>
  );
}

Berlangganan hanya pada yang Anda butuhkan

Banyak perubahan, satu notifikasi

Memperbarui dua store berturut-turut bisa membuat pelanggan melihat state yang setengah jadi.

Yang perlu diperhatikan

Kosongkan terpisah: pelanggan melihat 0 produk bersama kupon lama.
Kosongkan dengan batch: pelanggan berjalan sekali setelah kedua store berubah.

PengontrolBukan bagian dari kode contoh. Nilainya masuk ke contoh sebagai props.

Produkquantity
Kuponcoupon

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

Menyiapkan contoh…

Contoh langsung memerlukan JavaScript. Kode di bawah bisa Anda baca apa adanya.

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

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

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Produk</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Kupon</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Kosongkan terpisah</button>
        <button onClick={() => batch(clear)}>Kosongkan dengan batch</button>
      </div>
      <h2>Yang dilihat pelanggan</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Belum ada notifikasi.</li>
        )}
      </ol>
    </main>
  );
}

Berlangganan hanya pada yang Anda butuhkan

Simpan saat Anda memutuskan

Mengedit mengubah memori. Menyimpan adalah tindakan eksplisit, dan status menunjukkan apa yang sedang terjadi.

Yang perlu diperhatikan

Ketik: dirty aktif dan belum ada yang ditulis.
Naikkan penundaan lalu simpan: operation menampilkan save selama penulisan berlangsung.
Putar ulang: draf tersimpan dipulihkan dari IndexedDB.

PengontrolBukan bagian dari kode contoh. Nilainya masuk ke contoh sebagai props.

Penundaan penyimpananlatency

<Example
  latency={600}
/>

Menyiapkan contoh…

Contoh langsung memerlukan JavaScript. Kode di bawah bisa Anda baca apa adanya.

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>
        Draf
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Simpan
        </button>
        <button disabled={!dirty} onClick={revert}>
          Buang perubahan
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>
          {dirty ? 'perubahan belum tersimpan' : 'tersimpan'}
        </dd>
        <dt>operation</dt>
        <dd>{operation ?? 'tidak ada'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'belum'}</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);
  },
};

Simpan saat Anda memutuskan

Ketik cepat, tulis sekali

Menyimpan setiap tombol ditekan membanjiri penyimpanan. autoSave menunggu jeda.

Yang perlu diperhatikan

Ketik satu kalimat: perubahan naik cepat, sementara penulisan bertambah satu setelah setiap jeda.
Pilih "Setiap perubahan": setiap perubahan ditulis, dan kembali ke nilai tersimpan tidak menulis apa pun.

PengontrolBukan bagian dari kode contoh. Nilainya masuk ke contoh sebagai props.

Tunggu autoSavedelayMs

<Example
  delayMs={800}
/>

Menyiapkan contoh…

Contoh langsung memerlukan JavaScript. Kode di bawah bisa Anda baca apa adanya.

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>
        Catatan
        <textarea
          value={note}
          placeholder="Ketik satu kalimat dengan cepat…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Perubahan</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Penulisan ke penyimpanan</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>{dirty ? 'menunggu jeda' : 'tersimpan'}</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);
  },
};

Simpan saat Anda memutuskan

Lab kegagalan

Buat penyimpanan lambat, rusak, atau tidak tersedia, lalu lihat bagaimana restate menjaga data Anda dan melaporkan masalahnya.

Yang perlu diperhatikan

Naikkan penundaan dan simpan tiga kali: permintaan berbagi satu penulisan, jadi pending tetap 1 dan ketiga hasilnya tiba bersamaan.
Aktifkan penulisan gagal lalu simpan: dirty tetap true dan error menunjukkan penyebabnya.
Buat penyimpanan tidak tersedia: penyimpanan ditolak dengan STORAGE_UNAVAILABLE, tetapi pengeditan tetap berjalan.

PengontrolBukan bagian dari kode contoh. Nilainya masuk ke contoh sebagai props.

Penundaanlatency
Penulisan gagalfailWrites
Penyimpanan tidak tersediaunavailable

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

Menyiapkan contoh…

Contoh langsung memerlukan JavaScript. Kode di bawah bisa Anda baca apa adanya.

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

  return (
    <main>
      <label>
        Catatan
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>Simpan</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Simpan tiga kali
        </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>Hasil</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('Disk penuh');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Andal sejak rancangan

State per dokumen

Setiap dokumen yang terbuka butuh state sendiri yang dilepaskan saat dokumen ditutup.

Yang perlu diperhatikan

Ketik di dokumen A lalu di B: masing-masing menyimpan teksnya sendiri.
Tutup dokumen A lalu buka lagi: ia mulai kosong karena scope-nya sudah dihancurkan.

PengontrolBukan bagian dari kode contoh. Nilainya masuk ke contoh sebagai props.

Dokumendocuments
Dokumen A terbukafirstOpen

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

Menyiapkan contoh…

Contoh langsung memerlukan JavaScript. Kode di bawah bisa Anda baca apa adanya.

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="Hanya ditulis di sini"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} karakter`}</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={`Dokumen ${name}`} />,
        )}
      </div>
    </main>
  );
}

State milik komponen