restate / v1.0.0

Išsaugokite, kai nuspręsite

Laikykite store IndexedDB arba MMKV, įkelkite jį vieną kartą paleidžiant, išsaugokite aiškiai arba automatiškai ir rodykite neišsaugotus pakeitimus.

Šiame puslapyje

Išsaugoto store aprašas Paleidžiant palaukite vieną kartą Išsaugojimas, atšaukimas ir atstatymas Neišsaugotų pakeitimų ir eigos rodymas Išbandykite Automatinis išsaugojimas Prieš uždarant puslapį Saugyklos klaidų tvarkymas

Išsaugoto store aprašas

Pakeiskite restate į persistedRestate ir suteikite key. Komponentai toliau naudoja tą patį hook ir tą patį set.

Išsaugota reikšmė atkuriama automatiškai po sukūrimo. Redagavimas keičia atmintį; niekas neįrašoma, kol neišsaugote arba neįjungiate autoSave.

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

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

Paleidžiant palaukite vieną kartą

Kliento įėjimo taške importuokite programą ir jos store, tada prieš atvaizduodami palaukite restateManager.ready. Nuo tada komponentai gali tiesiogiai skaityti išsaugotas reikšmes.

Nepasiekiama saugykla, pavyzdžiui, serverio atvaizdavimo metu ar ją blokuojančioje naršyklėje, nėra klaida: tokie store veikia atmintyje. ready atmetamas tik tada, kai įrašų nepavyksta perskaityti, perkelti ar patikrinti.

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

Išsaugojimas, atšaukimas ir atstatymas

save įrašo dabartinę reikšmę, restore grąžina išsaugotą reikšmę, o resetAll išvalo ir atmintį, ir saugyklą. Kiekvienas grąžina 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

Neišsaugotų pakeitimų ir eigos rodymas

useStatus perpiešiamas, kai pasikeičia išsaugojimo būsena. dirty yra true, kol atmintis skiriasi nuo paskutinės įkeltos, išsaugotos ar atkurtos reikšmės. operation nurodo dabartinę saugyklos operaciją.

Perduokite selector, kad būtų perpiešiama tik pasikeitus vienam laukui.

Būsenos laukai

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

Nepavykęs išsaugojimas palieka dirty true ir nustato error. Kita sėkminga saugyklos operacija išvalo 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>}
    </>
  );
}

Išbandykite

Rašykite, padidinkite saugyklos delsą ir išsaugokite. Paleiskite pavyzdį iš naujo, kad pamatytumėte atkurtą juodraštį.

ValdiklisNe pavyzdžio kodo dalis. Reikšmės į pavyzdį patenka kaip props.

Saugyklos delsalatency

<Example
  latency={600}
/>

Ruošiamas pavyzdys…

Gyviems pavyzdžiams reikia JavaScript. Žemiau esantį kodą galite skaityti tokį, koks yra.

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>
        Juodraštis
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Išsaugoti
        </button>
        <button disabled={!dirty} onClick={revert}>
          Atmesti pakeitimus
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'neišsaugoti pakeitimai' : 'išsaugota'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'nėra'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'dar 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);
  },
};

Automatinis išsaugojimas

Įjunkite jį vieną kartą nustatymams ir juodraščiams, kurie visada turi būti išsaugoti. autoSave: true išsaugo po kiekvieno pakeitimo; { delayMs } laukia, kol pakeitimai liausis.

Pakeitimų seka virsta vienu įrašymu, o grįžimas į išsaugotą reikšmę nieko neįrašo. Klaidos rodomos status().error. Komponento scope atjungiamas įrašo laukiantį pakeitimą.

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

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

Prieš uždarant puslapį

Tą pačią būseną skaitykite už React ribų. Prieš išeinant įspėkite apie neišsaugotus pakeitimus arba išsaugokite viską, kai puslapis paslepiamas.

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

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

Saugyklos klaidų tvarkymas

Saugyklos klaidos atmeta operacijos Promise. Kiekviena restate klaida turi code, o išsaugotų store atveju ir įrašo 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'}".`);
}

Parašyta restate 1.0 API