Deneme alanı

Girdileri değiştirin. restate'in nasıl tepki verdiğini görün.

Yedi deney gerçek paketi çalıştırır. Soldaki denetleyici bu siteye aittir; sağdaki örnek yalnızca props alır, yani kodu tam olarak sizin yazacağınız koddur.

Denetleyici — yalnızca site içinprops — köprüÖrnek — kopyaladığınız kod

İki ekran, tek store

Birkaç bileşen aynı değere ihtiyaç duyar. Bir kez bildirin, her yerde okuyun.

Neye dikkat etmeli

Adım düğmesine basın: tüm okuyucular yeni sayıyı aynı anda gösterir.
Okuyucu sayısını değiştirin: yeni okuyucu mevcut değerden başlar.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

Okuyucularreaders
Adımstep

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

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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

Başlarken

Yalnızca değişeni render edin

Büyük bir store her değişiklikte her bileşeni yeniden render etmemeli.

Neye dikkat etmeli

Kartı düzenleyin: yalnızca tüm store'u okuyan kart render edilir.
Ürün ekleyin: ürünler ve özet render edilir; kupon kartı yerinde kalır.
shallow'u kapatın: özet her değişiklikte render edilir, çünkü selector'ı her seferinde yeni bir nesne döndürür.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

Özeti shallow ile karşılaştırshallowSummary

<Example
  shallowSummary={true}
/>

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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="Ürünler" value={count} />;
});

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

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Tüm 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'] }))}>
          Ürün ekle
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Kuponu değiştir
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Kartı düzenle
        </button>
      </div>
    </main>
  );
}

Yalnızca ihtiyacınız olana abone olun

Çok değişiklik, tek bildirim

İki store'u art arda güncellemek, abonenin yarım kalmış bir durumu görmesine yol açabilir.

Neye dikkat etmeli

Ayrı ayrı boşalt: abone eski kuponla birlikte 0 ürün görür.
batch ile boşalt: abone iki store da değiştikten sonra bir kez çalışır.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

Ürünlerquantity
Kuponcoupon

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

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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

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

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Ürünler</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Kupon</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Ayrı ayrı boşalt</button>
        <button onClick={() => batch(clear)}>batch ile boşalt</button>
      </div>
      <h2>Abonenin gördüğü</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Henüz bildirim yok.</li>
        )}
      </ol>
    </main>
  );
}

Yalnızca ihtiyacınız olana abone olun

Karar verdiğinizde kaydedin

Düzenleme belleği değiştirir. Kaydetme açık bir eylemdir ve durum neler olduğunu gösterir.

Neye dikkat etmeli

Yazın: dirty açılır ve henüz hiçbir şey yazılmaz.
Gecikmeyi artırıp kaydedin: yazma sürerken operation save gösterir.
Yeniden oynatın: kayıtlı taslak IndexedDB'den geri yüklenir.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

Depolama gecikmesilatency

<Example
  latency={600}
/>

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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>
        Taslak
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Kaydet
        </button>
        <button disabled={!dirty} onClick={revert}>
          Değişiklikleri at
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>
          {dirty ? 'kaydedilmemiş değişiklikler' : 'kaydedildi'}
        </dd>
        <dt>operation</dt>
        <dd>{operation ?? 'yok'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'henüz değil'}</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);
  },
};

Karar verdiğinizde kaydedin

Hızlı yazın, bir kez kaydedin

Her tuş vuruşunda kaydetmek depolamayı boğar. autoSave bir duraklamayı bekler.

Neye dikkat etmeli

Bir cümle yazın: değişiklikler hızla artar, yazmalar ise her duraklamadan sonra bir artar.
"Her değişiklikte"yi seçin: her değişiklik yazılır, kayıtlı değere dönmek ise hiçbir şey yazmaz.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

autoSave beklemesidelayMs

<Example
  delayMs={800}
/>

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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="Hızlıca bir cümle yazın…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Değişiklikler</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Depolamaya yazmalar</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>
        {dirty ? 'duraklama bekleniyor' : 'kaydedildi'}
      </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);
  },
};

Karar verdiğinizde kaydedin

Hata laboratuvarı

Depolamayı yavaş, bozuk ya da kullanılamaz hâle getirin ve restate'in verilerinizi nasıl koruduğunu ve sorunu nasıl bildirdiğini görün.

Neye dikkat etmeli

Gecikmeyi artırıp üç kez kaydedin: istekler tek bir yazmayı paylaşır; pending 1'de kalır ve üç sonuç birlikte gelir.
Başarısız yazmaları açıp kaydedin: dirty true kalır ve error nedeni gösterir.
Depolamayı kullanılamaz yapın: kaydetme STORAGE_UNAVAILABLE ile reddedilir ama düzenleme sürer.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

Gecikmelatency
Başarısız yazmalarfailWrites
Depolama kullanılamıyorunavailable

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

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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) => [`Kaydedildi: ${JSON.stringify(value)}`, ...list]),
      (reason) => setResults((list) => [`Başarısız: ${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}>Kaydet</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Üç kez kaydet
        </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>Sonuçlar</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 dolu');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Tasarımdan güvenilir

Belge başına durum

Her açık belgenin kendi durumu olmalı ve belge kapanınca serbest bırakılmalı.

Neye dikkat etmeli

A belgesine, sonra B'ye yazın: her biri kendi metnini tutar.
A belgesini kapatıp yeniden açın: scope'u yok edildiği için boş başlar.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

Belgelerdocuments
A belgesi açıkfirstOpen

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

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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="Yalnızca burada yazıldı"
        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={`Belge ${name}`} />,
        )}
      </div>
    </main>
  );
}

Bileşene ait durum