Playground

ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಬದಲಿಸಿ. restate ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ ನೋಡಿ.

ಏಳು ಪ್ರಯೋಗಗಳು ನಿಜವಾದ ಪ್ಯಾಕೇಜ್ ನಡೆಸುತ್ತವೆ. ಎಡಭಾಗದ ಕಂಟ್ರೋಲರ್ ಈ ಸೈಟ್‌ಗೆ ಸೇರಿದ್ದು; ಬಲಭಾಗದ ಉದಾಹರಣೆ props ಅನ್ನು ಮಾತ್ರ ಪಡೆಯುತ್ತದೆ, ಹೀಗಾಗಿ ಅದರ ಕೋಡ್ ನೀವೇ ಬರೆಯುವಂತೆಯೇ ಇದೆ.

ಕಂಟ್ರೋಲರ್ — ಸೈಟ್‌ಗೆ ಮಾತ್ರprops — ಸೇತುವೆಉದಾಹರಣೆ — ನೀವು ನಕಲಿಸುವ ಕೋಡ್

ಎರಡು ಪರದೆಗಳು, ಒಂದು ಸ್ಟೋರ್

ಅನೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಒಂದೇ ಮೌಲ್ಯ ಬೇಕು. ಒಮ್ಮೆ ಘೋಷಿಸಿ ಎಲ್ಲಿಯಾದರೂ ಓದಿ.

ಏನನ್ನು ಗಮನಿಸಬೇಕು

ಹಂತ ಬಟನ್ ಒತ್ತಿ: ಎಲ್ಲ ಓದುಗರೂ ಒಮ್ಮೆಲೇ ಹೊಸ ಸಂಖ್ಯೆ ತೋರಿಸುತ್ತಾರೆ.
ಓದುಗರ ಸಂಖ್ಯೆ ಬದಲಿಸಿ: ಹೊಸ ಓದುಗ ಪ್ರಸ್ತುತ ಮೌಲ್ಯದಿಂದ ಪ್ರಾರಂಭಿಸುತ್ತಾರೆ.

ಕಂಟ್ರೋಲರ್ಉದಾಹರಣೆ ಕೋಡ್‌ನ ಭಾಗವಲ್ಲ. ಮೌಲ್ಯಗಳು props ಆಗಿ ಉದಾಹರಣೆಗೆ ಹೋಗುತ್ತವೆ.

ಓದುಗರುreaders
ಹಂತstep

<Example
  readers={3}
  step={1}
/>

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

ನೇರ ಉದಾಹರಣೆಗಳಿಗೆ JavaScript ಅಗತ್ಯ. ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಹಾಗೆಯೇ ಓದಬಹುದು.

App.jsx

import { restate } from '@kkwaenggwari/restate';
import './styles.css';

const useCount = restate(0);

function Reader({ name }) {
  const count = useCount();

  return (
    <section className="card">
      <span>{name}</span>
      <output>{count}</output>
    </section>
  );
}

export default function Example({ readers = 3, step = 1 }) {
  return (
    <main>
      <div className="grid">
        {Array.from({ length: readers }, (_, index) => (
          <Reader key={index} name={`ಪರದೆ ${index + 1}`} />
        ))}
      </div>
      <div className="actions">
        <button onClick={() => useCount.set((count) => count + step)}>+{step}</button>
        <button onClick={() => useCount.reset()}>ಮರುಹೊಂದಿಸಿ</button>
      </div>
    </main>
  );
}

ಪ್ರಾರಂಭ

ಬದಲಾದುದನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡಿ

ದೊಡ್ಡ ಸ್ಟೋರ್ ಪ್ರತಿ ಬದಲಾವಣೆಯಲ್ಲೂ ಎಲ್ಲ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮತ್ತೆ ರೆಂಡರ್ ಮಾಡಬಾರದು.

ಏನನ್ನು ಗಮನಿಸಬೇಕು

ಕಾರ್ಡ್ ಸಂಪಾದಿಸಿ: ಇಡೀ ಸ್ಟೋರ್ ಕಾರ್ಡ್ ಮಾತ್ರ ರೆಂಡರ್ ಆಗುತ್ತದೆ.
ವಸ್ತು ಸೇರಿಸಿ: ವಸ್ತುಗಳು ಮತ್ತು ಸಾರಾಂಶ ರೆಂಡರ್ ಆಗುತ್ತವೆ; ಕೂಪನ್ ಕಾರ್ಡ್ ಅಲುಗಾಡದೆ ಉಳಿಯುತ್ತದೆ.
shallow ಆಫ್ ಮಾಡಿ: ಸಾರಾಂಶ ಪ್ರತಿ ಬದಲಾವಣೆಯಲ್ಲೂ ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಏಕೆಂದರೆ ಅದರ selector ಪ್ರತಿ ಬಾರಿ ಹೊಸ ಆಬ್ಜೆಕ್ಟ್ ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

ಕಂಟ್ರೋಲರ್ಉದಾಹರಣೆ ಕೋಡ್‌ನ ಭಾಗವಲ್ಲ. ಮೌಲ್ಯಗಳು props ಆಗಿ ಉದಾಹರಣೆಗೆ ಹೋಗುತ್ತವೆ.

ಸಾರಾಂಶವನ್ನು shallow ನಿಂದ ಹೋಲಿಸಿshallowSummary

<Example
  shallowSummary={true}
/>

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

ನೇರ ಉದಾಹರಣೆಗಳಿಗೆ JavaScript ಅಗತ್ಯ. ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಹಾಗೆಯೇ ಓದಬಹುದು.

App.jsx

import { memo, useRef } from 'react';
import { restate, shallow } from '@kkwaenggwari/restate';
import './styles.css';

const useCart = restate({ items: ['Book'], coupon: '', note: '' });

function Card({ title, value }) {
  const renders = useRef(0);
  renders.current += 1;

  return (
    <section className="card">
      <span>{title}</span>
      <output>{value}</output>
      <small>{`ರೆಂಡರ್‌ಗಳು: ${renders.current}`}</small>
    </section>
  );
}

const ItemCount = memo(function ItemCount() {
  const count = useCart((cart) => cart.items.length);
  return <Card title="ವಸ್ತುಗಳು" value={count} />;
});

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="ಕೂಪನ್" value={coupon || 'ಯಾವುದೂ ಇಲ್ಲ'} />;
});

const Summary = memo(function Summary({ compare }) {
  const summary = useCart((cart) => ({ count: cart.items.length, coupon: cart.coupon }), compare);
  return <Card title="ಸಾರಾಂಶ" value={`${summary.count} · ${summary.coupon || '-'}`} />;
});

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="ಇಡೀ ಸ್ಟೋರ್" value={cart.note.length} />;
});

export default function Example({ shallowSummary = true }) {
  return (
    <main>
      <div className="grid">
        <ItemCount />
        <Coupon />
        <Summary compare={shallowSummary ? shallow : undefined} />
        <Whole />
      </div>
      <div className="actions">
        <button onClick={() => useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }))}>
          ವಸ್ತು ಸೇರಿಸಿ
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          ಕೂಪನ್ ಬದಲಿಸಿ
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          ಕಾರ್ಡ್ ಸಂಪಾದಿಸಿ
        </button>
      </div>
    </main>
  );
}

ಬೇಕಾದುದಕ್ಕೆ ಮಾತ್ರ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಿ

ಅನೇಕ ಬದಲಾವಣೆಗಳು, ಒಂದು ಸೂಚನೆ

ಎರಡು ಸ್ಟೋರ್‌ಗಳನ್ನು ಒಂದರ ನಂತರ ಒಂದು ನವೀಕರಿಸಿದರೆ, ಸಬ್‌ಸ್ಕ್ರೈಬರ್ ಅರ್ಧ ಮುಗಿದ ಸ್ಥಿತಿಯನ್ನು ನೋಡಬಹುದು.

ಏನನ್ನು ಗಮನಿಸಬೇಕು

ಪ್ರತ್ಯೇಕವಾಗಿ ಖಾಲಿ ಮಾಡಿ: ಸಬ್‌ಸ್ಕ್ರೈಬರ್ ಹಳೆಯ ಕೂಪನ್‌ನೊಂದಿಗೆ 0 ವಸ್ತುಗಳನ್ನು ನೋಡುತ್ತಾರೆ.
batch ನಿಂದ ಖಾಲಿ ಮಾಡಿ: ಎರಡೂ ಸ್ಟೋರ್‌ಗಳು ಬದಲಾದ ನಂತರ ಸಬ್‌ಸ್ಕ್ರೈಬರ್ ಒಮ್ಮೆ ನಡೆಯುತ್ತಾರೆ.

ಕಂಟ್ರೋಲರ್ಉದಾಹರಣೆ ಕೋಡ್‌ನ ಭಾಗವಲ್ಲ. ಮೌಲ್ಯಗಳು props ಆಗಿ ಉದಾಹರಣೆಗೆ ಹೋಗುತ್ತವೆ.

ವಸ್ತುಗಳುquantity
ಕೂಪನ್coupon

<Example
  quantity={3}
  coupon="SPRING"
/>

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

ನೇರ ಉದಾಹರಣೆಗಳಿಗೆ JavaScript ಅಗತ್ಯ. ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಹಾಗೆಯೇ ಓದಬಹುದು.

App.jsx

import { useEffect, useState } from 'react';
import { batch, restate } from '@kkwaenggwari/restate';
import './styles.css';

const useItems = restate([]);
const useCoupon = restate('');

export default function Example({ quantity = 3, coupon = 'SPRING' }) {
  const items = useItems();
  const code = useCoupon();
  const [notices, setNotices] = useState([]);

  useEffect(() => {
    useItems.set(Array.from({ length: quantity }, (_, index) => `#${index + 1}`));
    useCoupon.set(coupon);
    setNotices([]);
  }, [quantity, coupon]);

  useEffect(
    () =>
      useItems.subscribe((next) => {
        const notice = `ಸೂಚಿಸಲಾಗಿದೆ: ${next.length} ವಸ್ತುಗಳು · ಕೂಪನ್ ${useCoupon.get() || '-'}`;
        setNotices((list) => [...list, notice]);
      }),
    [],
  );

  const clear = () => {
    useItems.set([]);
    useCoupon.set('');
  };

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>ವಸ್ತುಗಳು</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>ಕೂಪನ್</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>ಪ್ರತ್ಯೇಕವಾಗಿ ಖಾಲಿ ಮಾಡಿ</button>
        <button onClick={() => batch(clear)}>batch ನಿಂದ ಖಾಲಿ ಮಾಡಿ</button>
      </div>
      <h2>ಸಬ್‌ಸ್ಕ್ರೈಬರ್ ನೋಡಿದ್ದು</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>ಇನ್ನೂ ಸೂಚನೆಗಳಿಲ್ಲ.</li>
        )}
      </ol>
    </main>
  );
}

ಬೇಕಾದುದಕ್ಕೆ ಮಾತ್ರ ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಿ

ನೀವು ನಿರ್ಧರಿಸಿದಾಗ ಉಳಿಸಿ

ಸಂಪಾದನೆ ಮೆಮೊರಿಯನ್ನು ಬದಲಿಸುತ್ತದೆ. ಉಳಿಸುವುದು ಸ್ಪಷ್ಟ ಕ್ರಿಯೆ, ಮತ್ತು ಸ್ಥಿತಿ ಏನಾಗುತ್ತಿದೆ ಎಂದು ತೋರಿಸುತ್ತದೆ.

ಏನನ್ನು ಗಮನಿಸಬೇಕು

ಟೈಪ್ ಮಾಡಿ: dirty ಆನ್ ಆಗುತ್ತದೆ, ಇನ್ನೂ ಏನನ್ನೂ ಬರೆಯಲಾಗಿಲ್ಲ.
ವಿಳಂಬ ಹೆಚ್ಚಿಸಿ ಉಳಿಸಿ: ಬರಹ ನಡೆಯುವವರೆಗೆ operation save ತೋರಿಸುತ್ತದೆ.
ಮತ್ತೆ ರನ್ ಮಾಡಿ: ಉಳಿಸಿದ ಕರಡು IndexedDB ಯಿಂದ ಮರುಸ್ಥಾಪನೆಯಾಗುತ್ತದೆ.

ಕಂಟ್ರೋಲರ್ಉದಾಹರಣೆ ಕೋಡ್‌ನ ಭಾಗವಲ್ಲ. ಮೌಲ್ಯಗಳು 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 ವಿರಾಮಕ್ಕಾಗಿ ಕಾಯುತ್ತದೆ.

ಏನನ್ನು ಗಮನಿಸಬೇಕು

ಒಂದು ವಾಕ್ಯ ಟೈಪ್ ಮಾಡಿ: ಬದಲಾವಣೆಗಳು ವೇಗವಾಗಿ ಏರುತ್ತವೆ, ಬರಹಗಳು ಪ್ರತಿ ವಿರಾಮದ ನಂತರ ಒಂದೇ ಏರುತ್ತವೆ.
"ಪ್ರತಿ ಬದಲಾವಣೆಗೆ" ಆರಿಸಿ: ಪ್ರತಿ ಬದಲಾವಣೆ ಬರೆಯಲಾಗುತ್ತದೆ; ಉಳಿಸಿದ ಮೌಲ್ಯಕ್ಕೆ ಹಿಂತಿರುಗಿದರೆ ಏನೂ ಬರೆಯಲಾಗುವುದಿಲ್ಲ.

ಕಂಟ್ರೋಲರ್ಉದಾಹರಣೆ ಕೋಡ್‌ನ ಭಾಗವಲ್ಲ. ಮೌಲ್ಯಗಳು props ಆಗಿ ಉದಾಹರಣೆಗೆ ಹೋಗುತ್ತವೆ.

autoSave ಕಾಯುವಿಕೆdelayMs

<Example
  delayMs={800}
/>

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

ನೇರ ಉದಾಹರಣೆಗಳಿಗೆ JavaScript ಅಗತ್ಯ. ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಹಾಗೆಯೇ ಓದಬಹುದು.

App.jsx

import { useState } from 'react';
import { persistedRestate, useRestateScope } from '@kkwaenggwari/restate';
import { countingStorage, useWrites } from './storage.js';
import './styles.css';

function Note({ delayMs }) {
  const useNote = useRestateScope((scope) =>
    persistedRestate('', {
      scope,
      key: 'note',
      storage: countingStorage,
      autoSave: delayMs ? { delayMs } : true,
    }),
  );
  const note = useNote();
  const dirty = useNote.useStatus((status) => status.dirty);
  const writes = useWrites();
  const [edits, setEdits] = useState(0);

  return (
    <>
      <label>
        ಸೂಚನೆ
        <textarea
          value={note}
          placeholder="ಒಂದು ವಾಕ್ಯವನ್ನು ವೇಗವಾಗಿ ಟೈಪ್ ಮಾಡಿ…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>ಬದಲಾವಣೆಗಳು</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>ಸ್ಟೋರೇಜ್ ಬರಹಗಳು</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>
        {dirty ? 'ವಿರಾಮಕ್ಕಾಗಿ ಕಾಯುತ್ತಿದೆ' : 'ಉಳಿಸಲಾಗಿದೆ'}
      </p>
    </>
  );
}

export default function Example({ delayMs = 800 }) {
  // autoSave is part of the declaration: a new delay starts a new scope.
  return (
    <main>
      <Note key={delayMs} delayMs={delayMs} />
    </main>
  );
}

storage.js

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

// An in-memory storage adapter that counts real writes.
const records = new Map();
export const useWrites = restate(0);

export const countingStorage = {
  getItem: (key) => records.get(key) ?? null,
  setItem: (key, value) => {
    records.set(key, value);
    useWrites.set((count) => count + 1);
  },
  removeItem: (key) => {
    records.delete(key);
  },
};

ನೀವು ನಿರ್ಧರಿಸಿದಾಗ ಉಳಿಸಿ

ವೈಫಲ್ಯ ಪ್ರಯೋಗಾಲಯ

ಸ್ಟೋರೇಜ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸಿ, ಮುರಿಯಿರಿ ಅಥವಾ ಲಭ್ಯವಿಲ್ಲದಂತೆ ಮಾಡಿ, ಮತ್ತು restate ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಹೇಗೆ ರಕ್ಷಿಸುತ್ತದೆ, ಸಮಸ್ಯೆಯನ್ನು ಹೇಗೆ ವರದಿ ಮಾಡುತ್ತದೆ ನೋಡಿ.

ಏನನ್ನು ಗಮನಿಸಬೇಕು

ವಿಳಂಬ ಹೆಚ್ಚಿಸಿ ಮೂರು ಬಾರಿ ಉಳಿಸಿ: ವಿನಂತಿಗಳು ಒಂದೇ ಬರಹ ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ, ಹೀಗಾಗಿ pending 1 ರಲ್ಲೇ ಇರುತ್ತದೆ ಮತ್ತು ಮೂರೂ ಫಲಿತಾಂಶಗಳು ಒಟ್ಟಿಗೆ ಬರುತ್ತವೆ.
ವಿಫಲಗೊಳ್ಳುವ ಬರಹಗಳನ್ನು ಆನ್ ಮಾಡಿ ಉಳಿಸಿ: dirty true ಆಗಿಯೇ ಇರುತ್ತದೆ ಮತ್ತು error ಕಾರಣ ತೋರಿಸುತ್ತದೆ.
ಸ್ಟೋರೇಜ್ ಲಭ್ಯವಿಲ್ಲದಂತೆ ಮಾಡಿ: ಉಳಿಕೆ STORAGE_UNAVAILABLE ನೊಂದಿಗೆ ತಿರಸ್ಕೃತವಾಗುತ್ತದೆ, ಆದರೆ ಸಂಪಾದನೆ ಮುಂದುವರಿಯುತ್ತದೆ.

ಕಂಟ್ರೋಲರ್ಉದಾಹರಣೆ ಕೋಡ್‌ನ ಭಾಗವಲ್ಲ. ಮೌಲ್ಯಗಳು props ಆಗಿ ಉದಾಹರಣೆಗೆ ಹೋಗುತ್ತವೆ.

ವಿಳಂಬlatency
ವಿಫಲಗೊಳ್ಳುವ ಬರಹಗಳುfailWrites
ಸ್ಟೋರೇಜ್ ಲಭ್ಯವಿಲ್ಲunavailable

<Example
  latency={700}
  failWrites={false}
  unavailable={false}
/>

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

ನೇರ ಉದಾಹರಣೆಗಳಿಗೆ JavaScript ಅಗತ್ಯ. ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಹಾಗೆಯೇ ಓದಬಹುದು.

App.jsx

import { useEffect, useState } from 'react';
import { persistedRestate } from '@kkwaenggwari/restate';
import { flakyStorage, settings } from './storage.js';
import './styles.css';

const useNote = persistedRestate('', { key: 'lab-note', storage: flakyStorage });

export default function Example({ latency = 700, failWrites = false, unavailable = false }) {
  useEffect(() => {
    Object.assign(settings, { latency, failWrites, unavailable });
  }, [latency, failWrites, unavailable]);

  const note = useNote();
  const { dirty, operation, pending, error } = useNote.useStatus();
  const [results, setResults] = useState([]);

  const save = () =>
    useNote.save().then(
      (value) => setResults((list) => [`ಉಳಿಸಲಾಗಿದೆ: ${JSON.stringify(value)}`, ...list]),
      (reason) => setResults((list) => [`ವಿಫಲ: ${reason.code ?? reason.message}`, ...list]),
    );

  return (
    <main>
      <label>
        ಸೂಚನೆ
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>ಉಳಿಸಿ</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          ಮೂರು ಬಾರಿ ಉಳಿಸಿ
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{String(dirty)}</dd>
        <dt>operation</dt>
        <dd>{operation ?? '-'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>error</dt>
        <dd className={error ? 'bad' : ''}>{error ? (error.code ?? error.message) : '-'}</dd>
      </dl>
      <h2>ಫಲಿತಾಂಶಗಳು</h2>
      <ol className="log">
        {results.length ? (
          results.map((result, index) => <li key={results.length - index}>{result}</li>)
        ) : (
          <li>-</li>
        )}
      </ol>
    </main>
  );
}

storage.js

// A storage adapter whose speed and failures you can change.
const records = new Map();
export const settings = { latency: 0, failWrites: false, unavailable: false };
const wait = () => new Promise((resolve) => setTimeout(resolve, settings.latency));

export const flakyStorage = {
  isAvailable: () => !settings.unavailable,
  async getItem(key) {
    await wait();
    return records.get(key) ?? null;
  },
  async setItem(key, value) {
    await wait();
    if (settings.failWrites) throw new Error('ಡಿಸ್ಕ್ ತುಂಬಿದೆ');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

ವಿನ್ಯಾಸದಲ್ಲೇ ವಿಶ್ವಾಸಾರ್ಹ

ಪ್ರತಿ-ದಾಖಲೆ ಸ್ಟೇಟ್

ತೆರೆದಿರುವ ಪ್ರತಿ ದಾಖಲೆಗೂ ತನ್ನದೇ ಸ್ಟೇಟ್ ಬೇಕು, ಮತ್ತು ದಾಖಲೆ ಮುಚ್ಚಿದಾಗ ಅದು ಬಿಡುಗಡೆಯಾಗಬೇಕು.

ಏನನ್ನು ಗಮನಿಸಬೇಕು

ದಾಖಲೆ A ಯಲ್ಲಿ ಮತ್ತು ನಂತರ B ಯಲ್ಲಿ ಟೈಪ್ ಮಾಡಿ: ಪ್ರತಿಯೊಂದೂ ತನ್ನ ಪಠ್ಯ ಇಟ್ಟುಕೊಳ್ಳುತ್ತದೆ.
ದಾಖಲೆ A ಮುಚ್ಚಿ ಮತ್ತೆ ತೆರೆಯಿರಿ: ಅದರ scope ನಾಶವಾದ್ದರಿಂದ ಅದು ಖಾಲಿಯಾಗಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ.

ಕಂಟ್ರೋಲರ್ಉದಾಹರಣೆ ಕೋಡ್‌ನ ಭಾಗವಲ್ಲ. ಮೌಲ್ಯಗಳು props ಆಗಿ ಉದಾಹರಣೆಗೆ ಹೋಗುತ್ತವೆ.

ದಾಖಲೆಗಳುdocuments
ದಾಖಲೆ A ತೆರೆದಿದೆfirstOpen

<Example
  documents={2}
  firstOpen={true}
/>

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

ನೇರ ಉದಾಹರಣೆಗಳಿಗೆ JavaScript ಅಗತ್ಯ. ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಹಾಗೆಯೇ ಓದಬಹುದು.

App.jsx

import { restate, useRestateScope } from '@kkwaenggwari/restate';
import './styles.css';

function Document({ name }) {
  const useText = useRestateScope((scope) => restate('', { scope }));
  const text = useText();

  return (
    <section className="card">
      <span>{name}</span>
      <input
        value={text}
        placeholder="ಇಲ್ಲಿ ಮಾತ್ರ ಬರೆಯಲಾಗಿದೆ"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} ಅಕ್ಷರಗಳು`}</small>
    </section>
  );
}

export default function Example({ documents = 2, firstOpen = true }) {
  const names = ['A', 'B', 'C'].slice(0, documents);

  return (
    <main>
      <div className="grid">
        {names.map((name, index) =>
          index === 0 && !firstOpen ? null : <Document key={name} name={`ದಾಖಲೆ ${name}`} />,
        )}
      </div>
    </main>
  );
}

ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಸೇರಿದ ಸ್ಟೇಟ್