restate / v1.0.0

Spremajte kad odlučite

Čuvajte store u IndexedDB ili MMKV, učitajte ga jednom pri pokretanju, spremajte izričito ili automatski i prikazujte nespremljene izmjene.

Na ovoj stranici

Deklaracija spremljenog storea Pričekajte jednom pri pokretanju Spremanje, poništavanje i vraćanje na zadano Prikaz nespremljenih izmjena i napretka Isprobajte Automatsko spremanje Prije zatvaranja stranice Obrada pogrešaka spremišta

Deklaracija spremljenog storea

Zamijenite restate s persistedRestate i dajte mu key. Komponente i dalje koriste isti hook i isti set.

Spremljena vrijednost automatski se vraća nakon stvaranja. Uređivanje mijenja memoriju; ništa se ne zapisuje dok ne spremite ili uključite autoSave.

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

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

Pričekajte jednom pri pokretanju

U ulaznoj točki klijenta uvezite aplikaciju i njezine storeove, a zatim pričekajte restateManager.ready prije renderiranja. Od tada komponente mogu izravno čitati spremljene vrijednosti.

Nedostupno spremište, primjerice tijekom renderiranja na poslužitelju ili u pregledniku koji ga blokira, nije pogreška: takvi storeovi rade u memoriji. ready se odbija samo kad se zapisi ne mogu pročitati, migrirati ili validirati.

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();

Spremanje, poništavanje i vraćanje na zadano

save zapisuje trenutačnu vrijednost, restore se vraća na spremljenu vrijednost, a resetAll briše i memoriju i spremište. Svaka vraća Promise.

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

Prikaz nespremljenih izmjena i napretka

useStatus se ponovno renderira kad se promijeni status spremanja. dirty je true sve dok se memorija razlikuje od posljednje učitane, spremljene ili vraćene vrijednosti. operation imenuje operaciju sa spremištem koja je u tijeku.

Predajte selector kako bi se ponovno renderiralo samo kad se promijeni jedno polje.

Polja statusa

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

Neuspjelo spremanje ostavlja dirty na true i postavlja error. Sljedeća uspješna operacija sa spremištem briše error.

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

Isprobajte

Tipkajte, povećajte kašnjenje spremišta i spremite. Ponovno reproducirajte primjer da biste vidjeli vraćenu skicu.

KontrolerNije dio koda primjera. Vrijednosti stižu u primjer kao props.

Kašnjenje spremištalatency

<Example
  latency={600}
/>

Priprema primjera…

Primjeri uživo trebaju JavaScript. Kod ispod možete čitati takav kakav jest.

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>
        Skica
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Spremi
        </button>
        <button disabled={!dirty} onClick={revert}>
          Odbaci izmjene
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'nespremljene izmjene' : 'spremljeno'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'ništa'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'još ne'}</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);
  },
};

Automatsko spremanje

Za postavke i skice koje se uvijek trebaju spremati uključite ga jednom. autoSave: true sprema nakon svake promjene; { delayMs } čeka da izmjene prestanu.

Niz izmjena postaje jedan zapis, a povratak na spremljenu vrijednost ne zapisuje ništa. Pogreške se pojavljuju u status().error. Scope komponente pri demontiranju zapisuje izmjenu na čekanju.

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

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

Prije zatvaranja stranice

Čitajte isto stanje izvan Reacta. Upozorite prije napuštanja ako postoje nespremljene izmjene ili spremite sve kad se stranica sakrije.

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

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

Obrada pogrešaka spremišta

Pogreške spremišta odbijaju Promise operacije. Svaka restate pogreška ima code, a kod spremljenih storeova i key zapisa.

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'}".`);
}

Napisano za API restate 1.0