restate / v1.0.0

Karar verdiğinizde kaydedin

Bir store'u IndexedDB ya da MMKV'de tutun, başlangıçta bir kez yükleyin, açıkça ya da otomatik olarak kaydedin ve kaydedilmemiş değişiklikleri gösterin.

Bu sayfada

Kayıtlı store bildirmek Başlangıçta bir kez bekleyin Kaydetme, geri alma ve sıfırlama Kaydedilmemiş değişiklikleri ve ilerlemeyi göstermek Deneyin Otomatik kaydetme Sayfa kapanmadan önce Depolama hatalarını ele almak

Kayıtlı store bildirmek

restate'i persistedRestate ile değiştirin ve ona bir key verin. Bileşenler aynı hook'u ve aynı set'i kullanmayı sürdürür.

Kayıtlı değer oluşturulduktan sonra otomatik olarak geri yüklenir. Düzenleme belleği değiştirir; siz kaydedene ya da autoSave'i açana kadar hiçbir şey yazılmaz.

import { persistedRestate } from '@kkwaenggwari/restate';

export const useDraft = persistedRestate('', {
  key: 'article-draft',
  validate: (value) => typeof value === 'string',
});

Başlangıçta bir kez bekleyin

İstemci giriş noktasında uygulamayı ve store'larını import edin, sonra render etmeden önce restateManager.ready'yi bekleyin. Bundan sonra bileşenler kayıtlı değerleri doğrudan okuyabilir.

Kullanılamayan depolama, örneğin sunucu tarafı render'da ya da onu engelleyen bir tarayıcıda, hata değildir: bu tür store'lar bellekte çalışır. ready yalnızca kayıtlar okunamadığında, taşınamadığında ya da doğrulanamadığında reddedilir.

import { createRoot } from 'react-dom/client';
import { restateManager } from '@kkwaenggwari/restate';
import App from './App';

async function start() {
  const root = createRoot(document.getElementById('root'));
  try {
    await restateManager.ready;
    root.render(<App />);
  } catch (error) {
    root.render(<p>Could not load saved data.</p>);
    console.error(error);
  }
}
start();

Kaydetme, geri alma ve sıfırlama

save geçerli değeri yazar, restore kayıtlı değere döner, resetAll hem belleği hem depolamayı temizler. Her biri bir Promise döndürür.

await useDraft.save(); // write the current value
await useDraft.restore(); // return to the saved value
await useDraft.resetAndClearStorage(); // initial value in memory, record removed

Kaydedilmemiş değişiklikleri ve ilerlemeyi göstermek

useStatus kaydetme durumu değiştiğinde yeniden render edilir. Bellek en son yüklenen, kaydedilen ya da geri yüklenen değerden farklı olduğu sürece dirty true'dur. operation geçerli depolama işleminin adını verir.

Yalnızca tek bir alan değiştiğinde yeniden render etmek için bir selector verin.

Durum alanları

dirty      true | false
operation  "save" | "restore" | … | null
pending    number of unsettled operations
error      last storage error or null
available  false when storage cannot be used

Başarısız bir kaydetme dirty'yi true bırakır ve error'ı ayarlar. Sonraki başarılı depolama işlemi error'ı temizler.

function SaveButton() {
  const { dirty, operation, error } = useDraft.useStatus();
  const saving = operation === 'save';

  return (
    <>
      <button disabled={!dirty || saving} onClick={() => useDraft.save().catch(() => {})}>
        {saving ? 'Saving…' : 'Save'}
      </button>
      {error != null && <p>Could not save your draft.</p>}
    </>
  );
}

Deneyin

Yazın, depolama gecikmesini artırın ve kaydedin. Geri yüklenen taslağı görmek için örneği yeniden oynatın.

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);
  },
};

Otomatik kaydetme

Her zaman kaydedilmesi gereken ayarlar ve taslaklar için bir kez açın. autoSave: true her değişiklikten sonra kaydeder; { delayMs } değişiklikler durana kadar bekler.

Bir dizi değişiklik tek bir yazmaya dönüşür ve kayıtlı değere dönmek hiçbir şey yazmaz. Hatalar status().error içinde görünür. Bileşen scope'u ayrılırken bekleyen değişikliği yazar.

export const useTheme = persistedRestate('light', { key: 'theme', autoSave: true });

export const useDraft = persistedRestate('', {
  key: 'article-draft',
  autoSave: { delayMs: 500 },
});

Sayfa kapanmadan önce

Aynı durumu React dışında okuyun. Ayrılmadan önce kaydedilmemiş değişiklikler için uyarın ya da sayfa gizlendiğinde her şeyi kaydedin.

window.addEventListener('beforeunload', (event) => {
  if (useDraft.status().dirty) event.preventDefault();
});

window.addEventListener('pagehide', () => {
  restateManager.saveAll();
});

Depolama hatalarını ele almak

Depolama hataları işlemin Promise'ini reddeder. Her restate hatasının bir code'u, kayıtlı store'larda ise kaydın key'i de vardır.

try {
  await useDraft.save();
} catch (error) {
  if (error.code === 'STORAGE_UNAVAILABLE') showNotice('Saving is off in this browser.');
  else if (error.code === 'STORAGE_VALUE_TOO_LARGE') showNotice('This draft is too large.');
  else showNotice(`Could not save "${error.key ?? 'draft'}".`);
}

restate 1.0 API'si için yazıldı