restate / v1.0.0

Mentsen, amikor eldönti

Tartsa a store-t IndexedDB-ben vagy MMKV-ben, töltse be egyszer induláskor, mentsen kifejezetten vagy automatikusan, és jelenítse meg a nem mentett változásokat.

Ezen az oldalon

Mentett store deklarálása Várjon egyszer induláskor Mentés, visszavonás és visszaállítás A nem mentett változások és a folyamat megjelenítése Próbálja ki Automatikus mentés Az oldal bezárása előtt Tárolóhibák kezelése

Mentett store deklarálása

Cserélje a restate-et persistedRestate-re, és adjon meg neki egy key-t. A komponensek továbbra is ugyanazt a hookot és ugyanazt a set-et használják.

A mentett érték a létrehozás után automatikusan helyreáll. A szerkesztés a memóriát módosítja; semmi nem íródik ki, amíg nem ment, vagy be nem kapcsolja az autoSave-et.

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

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

Várjon egyszer induláskor

A kliens belépési pontján importálja az alkalmazást és a store-jait, majd renderelés előtt várjon a restateManager.ready-re. Onnantól a komponensek közvetlenül olvashatják a mentett értékeket.

Az elérhetetlen tároló, például szerveroldali renderelésnél vagy egy azt letiltó böngészőben, nem hiba: az ilyen store-ok a memóriában futnak. A ready csak akkor utasul el, ha a rekordokat nem lehet beolvasni, migrálni vagy ellenőrizni.

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

Mentés, visszavonás és visszaállítás

A save kiírja az aktuális értéket, a restore visszaáll a mentett értékre, a resetAll pedig törli a memóriát és a tárolót is. Mindegyik Promise-t ad vissza.

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

A nem mentett változások és a folyamat megjelenítése

A useStatus újrarenderel, amikor a mentés állapota változik. A dirty értéke true, amíg a memória eltér az utoljára betöltött, mentett vagy helyreállított értéktől. Az operation az aktuális tárolóművelet nevét adja meg.

Adjon át egy selectort, hogy csak egyetlen mező változásakor rendereljen újra.

Állapotmezők

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

A sikertelen mentés a dirty értékét true-n hagyja, és beállítja az error mezőt. A következő sikeres tárolóművelet törli az error mezőt.

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

Próbálja ki

Gépeljen, növelje a tároló késleltetését, és mentsen. Játssza újra a példát, hogy lássa a helyreállított piszkozatot.

VezérlőNem része a példakódnak. Az értékek props-ként érkeznek a példába.

Tároló késleltetéselatency

<Example
  latency={600}
/>

A példa előkészítése…

Az élő példákhoz JavaScript kell. Az alábbi kódot úgy olvashatja, ahogy van.

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>
        Piszkozat
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Mentés
        </button>
        <button disabled={!dirty} onClick={revert}>
          Változások elvetése
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'nem mentett változások' : 'mentve'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'nincs'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'még nem'}</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);
  },
};

Automatikus mentés

Kapcsolja be egyszer azokhoz a beállításokhoz és piszkozatokhoz, amelyeket mindig menteni kell. Az autoSave: true minden változás után ment; a { delayMs } megvárja, amíg a változások abbamaradnak.

Változások sorozatából egyetlen írás lesz, a mentett értékhez való visszatérés pedig semmit nem ír. A hibák a status().error mezőben jelennek meg. Egy komponens scope-ja leválasztáskor kiírja a függő változást.

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

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

Az oldal bezárása előtt

Olvassa ugyanazt az állapotot a Reacten kívül. Figyelmeztessen távozás előtt a nem mentett változásokra, vagy mentsen mindent, amikor az oldal elrejtődik.

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

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

Tárolóhibák kezelése

A tárolóhibák elutasítják a művelet Promise-át. Minden restate-hibának van code mezője, mentett store-nál pedig a rekord key-e is.

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

A restate 1.0 API-jához írva