restate / v1.0.0

நீங்கள் முடிவு செய்யும்போது சேமியுங்கள்

ஸ்டோரை IndexedDB அல்லது MMKV-இல் வைத்து, தொடக்கத்தில் ஒருமுறை ஏற்றி, வெளிப்படையாகவோ தானாகவோ சேமித்து, சேமிக்கப்படாத மாற்றங்களைக் காட்டுங்கள்.

இந்தப் பக்கத்தில்

சேமிக்கப்பட்ட ஸ்டோரை அறிவித்தல்தொடக்கத்தில் ஒருமுறை காத்திருங்கள்சேமி, செயல்தவிர், மீட்டமை சேமிக்கப்படாத மாற்றங்களையும் முன்னேற்றத்தையும் காட்டுதல்முயன்று பாருங்கள்தானியங்கிச் சேமிப்பு பக்கம் மூடும் முன்சேமிப்பகப் பிழைகளைக் கையாளுதல்

சேமிக்கப்பட்ட ஸ்டோரை அறிவித்தல்

restate-ஐ persistedRestate ஆக மாற்றி ஒரு key கொடுங்கள். கம்போனென்ட்கள் அதே ஹூக்கையும் அதே set-ஐயும் தொடர்ந்து பயன்படுத்துகின்றன.

உருவாக்கிய பிறகு சேமித்த மதிப்பு தானாக மீட்டெடுக்கப்படுகிறது. திருத்துதல் நினைவகத்தை மாற்றுகிறது; நீங்கள் சேமிக்கும்வரை அல்லது autoSave-ஐ இயக்கும்வரை எதுவும் எழுதப்படாது.

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

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

தொடக்கத்தில் ஒருமுறை காத்திருங்கள்

கிளையன்ட் நுழைவுப் புள்ளியில் ஆப்பையும் அதன் ஸ்டோர்களையும் import செய்து, ரெண்டர் செய்யும் முன் restateManager.ready-க்குக் காத்திருங்கள். அதன் பிறகு கம்போனென்ட்கள் சேமித்த மதிப்புகளை நேரடியாகப் படிக்கலாம்.

கிடைக்காத சேமிப்பகம் — சர்வர் ரெண்டரிங்கிலோ அதைத் தடுக்கும் உலாவியிலோ — பிழை அல்ல: அத்தகைய ஸ்டோர்கள் நினைவகத்தில் இயங்குகின்றன. பதிவுகளைப் படிக்கவோ மாற்றவோ சரிபார்க்கவோ முடியாதபோது மட்டுமே ready நிராகரிக்கப்படுகிறது.

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

சேமி, செயல்தவிர், மீட்டமை

save தற்போதைய மதிப்பை எழுதுகிறது, restore சேமித்த மதிப்புக்குத் திரும்புகிறது, resetAll நினைவகத்தையும் சேமிப்பகத்தையும் அழிக்கிறது. ஒவ்வொன்றும் 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

சேமிக்கப்படாத மாற்றங்களையும் முன்னேற்றத்தையும் காட்டுதல்

சேமிப்பு நிலை மாறும்போது useStatus மீண்டும் ரெண்டர் ஆகிறது. கடைசியாக ஏற்றிய, சேமித்த அல்லது மீட்டெடுத்த மதிப்பிலிருந்து நினைவகம் வேறுபடும்வரை dirty true. operation தற்போதைய சேமிப்பகச் செயலின் பெயரைக் கூறுகிறது.

ஒரு புலம் மாறும்போது மட்டும் மீண்டும் ரெண்டர் ஆக selector கொடுங்கள்.

நிலைப் புலங்கள்

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

தோல்வியடைந்த சேமிப்பு dirty-ஐ true ஆகவே விட்டு error-ஐ அமைக்கிறது. அடுத்த வெற்றிகரமான சேமிப்பகச் செயல் 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>}
    </>
  );
}

முயன்று பாருங்கள்

தட்டச்சு செய்து, சேமிப்பகத் தாமதத்தை அதிகரித்து, சேமியுங்கள். மீட்டெடுத்த வரைவைப் பார்க்க எடுத்துக்காட்டை மீண்டும் இயக்குங்கள்.

கட்டுப்படுத்திஎடுத்துக்காட்டுக் குறியீட்டின் பகுதி அல்ல. மதிப்புகள் props ஆக எடுத்துக்காட்டுக்குச் செல்கின்றன.

சேமிப்பகத் தாமதம்latency

<Example
  latency={600}
/>

எடுத்துக்காட்டு தயாராகிறது…

நேரடி எடுத்துக்காட்டுகளுக்கு JavaScript தேவை. கீழே உள்ள குறியீட்டை அப்படியே படிக்கலாம்.

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>
        வரைவு
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          சேமி
        </button>
        <button disabled={!dirty} onClick={revert}>
          மாற்றங்களைக் கைவிடு
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>
          {dirty ? 'சேமிக்கப்படாத மாற்றங்கள்' : 'சேமிக்கப்பட்டது'}
        </dd>
        <dt>operation</dt>
        <dd>{operation ?? 'இல்லை'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'இன்னும் இல்லை'}</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);
  },
};

தானியங்கிச் சேமிப்பு

எப்போதும் சேமிக்கப்பட வேண்டிய அமைப்புகள், வரைவுகளுக்கு ஒருமுறை இயக்குங்கள். autoSave: true ஒவ்வொரு மாற்றத்துக்குப் பிறகும் சேமிக்கிறது; { delayMs } மாற்றங்கள் நிற்கும்வரை காத்திருக்கிறது.

தொடர் மாற்றங்கள் ஒரே எழுதுதலாகின்றன; சேமித்த மதிப்புக்குத் திரும்பினால் எதுவும் எழுதப்படாது. பிழைகள் status().error-இல் தோன்றும். கம்போனென்டின் scope அன்மவுன்ட்டின்போது நிலுவையிலுள்ள மாற்றத்தை எழுதுகிறது.

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

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

பக்கம் மூடும் முன்

அதே நிலையை React-க்கு வெளியே படியுங்கள். வெளியேறும் முன் சேமிக்கப்படாத மாற்றங்கள் குறித்து எச்சரியுங்கள், அல்லது பக்கம் மறையும்போது அனைத்தையும் சேமியுங்கள்.

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

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

சேமிப்பகப் பிழைகளைக் கையாளுதல்

சேமிப்பகப் பிழைகள் செயலின் Promise-ஐ நிராகரிக்கின்றன. ஒவ்வொரு restate பிழைக்கும் code உண்டு; சேமிக்கப்பட்ட ஸ்டோர்களுக்குப் பதிவின் 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'}".`);
}

restate 1.0 API-க்காக எழுதப்பட்டது