restate / v1.0.0

Shranjujte, ko se odločite

Hranite store v IndexedDB ali MMKV, ga ob zagonu enkrat naložite, shranjujte izrecno ali samodejno in prikazujte neshranjene spremembe.

Na tej strani

Deklaracija shranjenega storea Ob zagonu počakajte enkrat Shranjevanje, razveljavitev in ponastavitev Prikaz neshranjenih sprememb in napredka Preizkusite Samodejno shranjevanje Pred zaprtjem strani Obravnava napak shrambe

Deklaracija shranjenega storea

restate zamenjajte s persistedRestate in mu dajte key. Komponente še naprej uporabljajo isti hook in isti set.

Shranjena vrednost se po ustvarjanju samodejno obnovi. Urejanje spremeni pomnilnik; nič se ne zapiše, dokler ne shranite ali vklopite autoSave.

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

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

Ob zagonu počakajte enkrat

V vstopni točki odjemalca uvozite aplikacijo in njene storeje, nato pred upodabljanjem počakajte na restateManager.ready. Od tam lahko komponente neposredno berejo shranjene vrednosti.

Nedosegljiva shramba, na primer pri upodabljanju na strežniku ali v brskalniku, ki jo blokira, ni napaka: taki storeji delujejo v pomnilniku. ready se zavrne le, ko zapisov ni mogoče prebrati, migrirati ali preveriti.

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

Shranjevanje, razveljavitev in ponastavitev

save zapiše trenutno vrednost, restore se vrne na shranjeno vrednost, resetAll pa počisti pomnilnik in shrambo. Vsaka vrne 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 neshranjenih sprememb in napredka

useStatus se znova upodobi, ko se spremeni stanje shranjevanja. dirty je true, dokler se pomnilnik razlikuje od zadnje naložene, shranjene ali obnovljene vrednosti. operation poimenuje trenutno operacijo s shrambo.

Podajte selector, da se znova upodobi le ob spremembi enega polja.

Polja stanja

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

Neuspelo shranjevanje pusti dirty na true in nastavi error. Naslednja uspešna operacija s shrambo počisti 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>}
    </>
  );
}

Preizkusite

Tipkajte, povečajte zakasnitev shrambe in shranite. Primer predvajajte znova, da vidite obnovljen osnutek.

KrmilnikNi del kode primera. Vrednosti pridejo v primer kot props.

Zakasnitev shrambelatency

<Example
  latency={600}
/>

Pripravljanje primera …

Primeri v živo potrebujejo JavaScript. Kodo spodaj lahko preberete takšno, kot je.

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>
        Osnutek
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Shrani
        </button>
        <button disabled={!dirty} onClick={revert}>
          Zavrzi spremembe
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'neshranjene spremembe' : 'shranjeno'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'nič'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'še 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);
  },
};

Samodejno shranjevanje

Za nastavitve in osnutke, ki se morajo vedno shraniti, ga vklopite enkrat. autoSave: true shrani po vsaki spremembi; { delayMs } počaka, da se spremembe ustavijo.

Niz sprememb postane en zapis, vrnitev na shranjeno vrednost pa ne zapiše ničesar. Napake se pojavijo v status().error. Scope komponente ob odklopu zapiše čakajočo spremembo.

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

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

Pred zaprtjem strani

Isto stanje berite zunaj Reacta. Pred odhodom opozorite, če obstajajo neshranjene spremembe, ali shranite vse, ko se stran skrije.

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

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

Obravnava napak shrambe

Napake shrambe zavrnejo Promise operacije. Vsaka napaka restate ima code, pri shranjenih storejih pa tudi 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