restate / v1.0.0

Tallenna, kun päätät

Pidä store IndexedDB:ssä tai MMKV:ssä, lataa se kerran käynnistyksessä, tallenna nimenomaisesti tai automaattisesti ja näytä tallentamattomat muutokset.

Tällä sivulla

Tallennetun storen määrittely Odota kerran käynnistyksessä Tallennus, kumoaminen ja nollaus Tallentamattomien muutosten ja etenemisen näyttäminen Kokeile Automaattitallennus Ennen sivun sulkemista Tallennusvirheiden käsittely

Tallennetun storen määrittely

Vaihda restate tilalle persistedRestate ja anna sille key. Komponentit käyttävät edelleen samaa hookia ja samaa setiä.

Tallennettu arvo palautuu automaattisesti luomisen jälkeen. Muokkaaminen muuttaa muistia; mitään ei kirjoiteta ennen kuin tallennat tai otat autoSaven käyttöön.

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

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

Odota kerran käynnistyksessä

Importtaa asiakkaan aloituspisteessä sovellus ja sen storet ja odota sitten restateManager.ready-arvoa ennen renderöintiä. Siitä eteenpäin komponentit voivat lukea tallennetut arvot suoraan.

Käyttämätön tallennustila, kuten palvelinrenderöinnissä tai sen estävässä selaimessa, ei ole virhe: tällaiset storet toimivat muistissa. ready hylätään vain, kun tietueita ei voida lukea, siirtää tai validoida.

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

Tallennus, kumoaminen ja nollaus

save kirjoittaa nykyisen arvon, restore palaa tallennettuun arvoon ja resetAll tyhjentää sekä muistin että tallennustilan. Kukin palauttaa Promisen.

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

Tallentamattomien muutosten ja etenemisen näyttäminen

useStatus renderöityy uudelleen, kun tallennustila muuttuu. dirty on true niin kauan kuin muisti poikkeaa viimeksi ladatusta, tallennetusta tai palautetusta arvosta. operation nimeää käynnissä olevan tallennustoiminnon.

Anna selector, jotta renderöinti tapahtuu vain yhden kentän muuttuessa.

Tilakentät

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

Epäonnistunut tallennus jättää dirtyn arvoon true ja asettaa errorin. Seuraava onnistunut tallennustoiminto tyhjentää errorin.

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

Kokeile

Kirjoita, kasvata tallennustilan viivettä ja tallenna. Toista esimerkki uudelleen nähdäksesi palautetun luonnoksen.

OhjainEi osa esimerkkikoodia. Arvot tulevat esimerkille props-muodossa.

Tallennustilan viivelatency

<Example
  latency={600}
/>

Valmistellaan esimerkkiä…

Live-esimerkit tarvitsevat JavaScriptiä. Voit lukea alla olevan koodin sellaisenaan.

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>
        Luonnos
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Tallenna
        </button>
        <button disabled={!dirty} onClick={revert}>
          Hylkää muutokset
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>
          {dirty ? 'tallentamattomia muutoksia' : 'tallennettu'}
        </dd>
        <dt>operation</dt>
        <dd>{operation ?? 'ei mitään'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'ei vielä'}</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);
  },
};

Automaattitallennus

Ota se kerran käyttöön asetuksille ja luonnoksille, jotka on aina tallennettava. autoSave: true tallentaa jokaisen muutoksen jälkeen; { delayMs } odottaa, kunnes muutokset loppuvat.

Muutossarjasta tulee yksi kirjoitus, ja paluu tallennettuun arvoon ei kirjoita mitään. Virheet näkyvät status().error-kentässä. Komponentin scope kirjoittaa odottavan muutoksen irrottamisen yhteydessä.

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

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

Ennen sivun sulkemista

Lue sama tila Reactin ulkopuolella. Varoita tallentamattomista muutoksista ennen poistumista tai tallenna kaikki, kun sivu piilotetaan.

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

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

Tallennusvirheiden käsittely

Tallennusvirheet hylkäävät toiminnon Promisen. Jokaisella restate-virheellä on code, ja tallennetuissa storeissa myös tietueen key.

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

Kirjoitettu restate 1.0 -rajapinnalle (API)