restate / v1.0.0

যখন ঠিক করেন তখন সংরক্ষণ করুন

স্টোরকে IndexedDB বা MMKV-তে রাখুন, স্টার্টআপে একবার লোড করুন, স্পষ্টভাবে বা নিজে থেকে সংরক্ষণ করুন আর অসংরক্ষিত পরিবর্তন দেখান।

এই পাতায়সংরক্ষিত স্টোর ঘোষণাস্টার্টআপে একবার অপেক্ষা করুনসংরক্ষণ, বাতিল আর রিসেটঅসংরক্ষিত পরিবর্তন আর অগ্রগতি দেখানোচালিয়ে দেখুনস্বয়ংক্রিয় সংরক্ষণপাতা বন্ধ হওয়ার আগেস্টোরেজের ত্রুটি সামলানো

সংরক্ষিত স্টোর ঘোষণা

restate-কে persistedRestate দিয়ে বদলে একটি key দিন। কম্পোনেন্ট একই হুক আর একই set ব্যবহার করে যায়।

তৈরি হওয়ার পরে সংরক্ষিত মান নিজে থেকে ফিরে আসে। সম্পাদনা মেমরি বদলায়; আপনি সংরক্ষণ না করা বা autoSave চালু না করা পর্যন্ত কিছুই লেখা হয় না।

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

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

স্টার্টআপে একবার অপেক্ষা করুন

ক্লায়েন্ট এন্ট্রি পয়েন্টে অ্যাপ আর তার স্টোর ইমপোর্ট করুন, তারপর রেন্ডারের আগে restateManager.ready-র জন্য অপেক্ষা করুন। এরপর থেকে কম্পোনেন্ট সংরক্ষিত মান সরাসরি পড়তে পারে।

অনুপলব্ধ স্টোরেজ, যেমন সার্ভার রেন্ডারিংয়ে বা যে ব্রাউজার তা আটকায় সেখানে, ত্রুটি নয়: এমন স্টোর মেমরিতে চলে। ready শুধু তখনই প্রত্যাখ্যাত হয় যখন রেকর্ড পড়া, মাইগ্রেট বা যাচাই করা যায় না।

JavaScript / JSX
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 ফেরত দেয়।

JavaScript / JSX
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 দিন।

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

চালিয়ে দেখুন

টাইপ করুন, স্টোরেজের বিলম্ব বাড়ান আর সংরক্ষণ করুন। ফিরিয়ে আনা খসড়া দেখতে উদাহরণ আবার চালান।

উদাহরণ প্রস্তুত হচ্ছে…

স্বয়ংক্রিয় সংরক্ষণ

যে সেটিংস আর খসড়া সবসময় সংরক্ষণ হওয়া উচিত, তার জন্য একবার চালু করুন। autoSave: true প্রতিটি পরিবর্তনের পরে সংরক্ষণ করে; { delayMs } পরিবর্তন থামা পর্যন্ত অপেক্ষা করে।

পরপর পরিবর্তন একটি লেখা হয়ে যায়, আর সংরক্ষিত মানে ফিরলে কিছুই লেখা হয় না। ত্রুটি status().error-এ দেখা যায়। কম্পোনেন্টের scope আনমাউন্টের সময় অপেক্ষমাণ পরিবর্তন লেখে।

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

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

পাতা বন্ধ হওয়ার আগে

একই স্ট্যাটাস React-এর বাইরে পড়ুন। চলে যাওয়ার আগে অসংরক্ষিত পরিবর্তনের সতর্কতা দিন, বা পাতা লুকালে সব সংরক্ষণ করুন।

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

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

স্টোরেজের ত্রুটি সামলানো

স্টোরেজের ত্রুটি কাজের Promise প্রত্যাখ্যান করে। প্রতিটি restate ত্রুটিতে code থাকে, আর সংরক্ষিত স্টোরে রেকর্ডের key-ও।

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

ডকুমেন্টেশনে খুঁজুন

সব গাইডের শিরোনাম, বিবরণ আর লেখায় খুঁজুন।