Playground

Thay đổi đầu vào. Xem restate phản hồi ra sao.

Bảy thử nghiệm chạy gói thật. Bộ điều khiển bên trái thuộc về trang này; ví dụ bên phải chỉ nhận props, nên mã của nó đúng là thứ bạn sẽ tự viết.

Bộ điều khiển — chỉ dành cho trangprops — cầu nốiVí dụ — mã bạn sao chép

Hai màn hình, một store

Nhiều component cần cùng một giá trị. Khai báo một lần và đọc ở bất cứ đâu.

Điều cần để ý

Nhấn nút bước: mọi bên đọc hiển thị con số mới cùng lúc.
Đổi số bên đọc: bên đọc mới bắt đầu từ giá trị hiện tại.

Bộ điều khiểnKhông thuộc mã ví dụ. Các giá trị đi vào ví dụ dưới dạng props.

Bên đọcreaders
Bướcstep

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

Đang chuẩn bị ví dụ…

Ví dụ trực tiếp cần JavaScript. Bạn vẫn có thể đọc đoạn mã bên dưới như hiện có.

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={`Màn hình ${index + 1}`} />
        ))}
      </div>
      <div className="actions">
        <button onClick={() => useCount.set((count) => count + step)}>+{step}</button>
        <button onClick={() => useCount.reset()}>Đặt lại</button>
      </div>
    </main>
  );
}

Bắt đầu

Chỉ render phần thay đổi

Một store lớn không nên render lại mọi component mỗi khi có thay đổi.

Điều cần để ý

Sửa thẻ: chỉ thẻ toàn bộ store render.
Thêm sản phẩm: sản phẩm và tóm tắt render; thẻ mã giảm giá đứng yên.
Tắt shallow: phần tóm tắt render mỗi lần thay đổi vì selector của nó luôn trả về đối tượng mới.

Bộ điều khiểnKhông thuộc mã ví dụ. Các giá trị đi vào ví dụ dưới dạng props.

So sánh tóm tắt bằng shallowshallowSummary

<Example
  shallowSummary={true}
/>

Đang chuẩn bị ví dụ…

Ví dụ trực tiếp cần JavaScript. Bạn vẫn có thể đọc đoạn mã bên dưới như hiện có.

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>{`Lần render: ${renders.current}`}</small>
    </section>
  );
}

const ItemCount = memo(function ItemCount() {
  const count = useCart((cart) => cart.items.length);
  return <Card title="Sản phẩm" value={count} />;
});

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="Mã giảm giá" value={coupon || 'không có'} />;
});

const Summary = memo(function Summary({ compare }) {
  const summary = useCart((cart) => ({ count: cart.items.length, coupon: cart.coupon }), compare);
  return <Card title="Tóm tắt" value={`${summary.count} · ${summary.coupon || '-'}`} />;
});

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Toàn bộ store" 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'] }))}>
          Thêm sản phẩm
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Bật/tắt mã giảm giá
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Sửa thẻ
        </button>
      </div>
    </main>
  );
}

Chỉ đăng ký những gì bạn cần

Nhiều thay đổi, một thông báo

Cập nhật hai store liên tiếp có thể khiến bên đăng ký thấy một trạng thái dở dang.

Điều cần để ý

Làm trống riêng lẻ: bên đăng ký thấy 0 sản phẩm đi cùng mã giảm giá cũ.
Làm trống với batch: bên đăng ký chạy một lần sau khi cả hai store đã đổi.

Bộ điều khiểnKhông thuộc mã ví dụ. Các giá trị đi vào ví dụ dưới dạng props.

Sản phẩmquantity
Mã giảm giácoupon

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

Đang chuẩn bị ví dụ…

Ví dụ trực tiếp cần JavaScript. Bạn vẫn có thể đọc đoạn mã bên dưới như hiện có.

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 = `Đã thông báo: ${next.length} sản phẩm · mã giảm giá ${useCoupon.get() || '-'}`;
        setNotices((list) => [...list, notice]);
      }),
    [],
  );

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

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>Sản phẩm</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>Mã giảm giá</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>Làm trống riêng lẻ</button>
        <button onClick={() => batch(clear)}>Làm trống với batch</button>
      </div>
      <h2>Bên đăng ký đã thấy gì</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>Chưa có thông báo.</li>
        )}
      </ol>
    </main>
  );
}

Chỉ đăng ký những gì bạn cần

Lưu khi bạn quyết định

Chỉnh sửa thay đổi bộ nhớ. Lưu là một hành động tường minh, và trạng thái cho thấy điều gì đang diễn ra.

Điều cần để ý

Gõ: dirty bật và chưa có gì được ghi.
Tăng độ trễ rồi lưu: operation hiển thị save trong lúc ghi.
Phát lại: bản nháp đã lưu được khôi phục từ IndexedDB.

Bộ điều khiểnKhông thuộc mã ví dụ. Các giá trị đi vào ví dụ dưới dạng props.

Độ trễ lưu trữlatency

<Example
  latency={600}
/>

Đang chuẩn bị ví dụ…

Ví dụ trực tiếp cần JavaScript. Bạn vẫn có thể đọc đoạn mã bên dưới như hiện có.

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>
        Bản nháp
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          Lưu
        </button>
        <button disabled={!dirty} onClick={revert}>
          Bỏ thay đổi
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? 'có thay đổi chưa lưu' : 'đã lưu'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? 'không có'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : 'chưa'}</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);
  },
};

Lưu khi bạn quyết định

Gõ nhanh, ghi một lần

Lưu ở mỗi lần nhấn phím sẽ làm ngập bộ nhớ lưu trữ. autoSave chờ một khoảng dừng.

Điều cần để ý

Gõ một câu: số thay đổi tăng nhanh, còn số lần ghi chỉ tăng một sau mỗi lần dừng.
Chọn "Mỗi thay đổi": mọi thay đổi đều được ghi, còn quay về giá trị đã lưu thì không ghi gì.

Bộ điều khiểnKhông thuộc mã ví dụ. Các giá trị đi vào ví dụ dưới dạng props.

Thời gian chờ autoSavedelayMs

<Example
  delayMs={800}
/>

Đang chuẩn bị ví dụ…

Ví dụ trực tiếp cần JavaScript. Bạn vẫn có thể đọc đoạn mã bên dưới như hiện có.

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>
        Ghi chú
        <textarea
          value={note}
          placeholder="Gõ nhanh một câu…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>Thay đổi</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>Lần ghi vào bộ nhớ lưu trữ</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>{dirty ? 'đang chờ ngừng gõ' : 'đã lưu'}</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);
  },
};

Lưu khi bạn quyết định

Phòng thử lỗi

Làm cho bộ nhớ lưu trữ chậm, hỏng hoặc không khả dụng và xem restate giữ dữ liệu của bạn và báo vấn đề thế nào.

Điều cần để ý

Tăng độ trễ và lưu ba lần: các yêu cầu dùng chung một lần ghi, nên pending giữ ở 1 và ba kết quả về cùng nhau.
Bật ghi thất bại rồi lưu: dirty vẫn là true và error cho biết nguyên nhân.
Làm bộ nhớ lưu trữ không khả dụng: việc lưu bị từ chối với STORAGE_UNAVAILABLE, nhưng chỉnh sửa vẫn tiếp tục.

Bộ điều khiểnKhông thuộc mã ví dụ. Các giá trị đi vào ví dụ dưới dạng props.

Độ trễlatency
Ghi thất bạifailWrites
Bộ nhớ lưu trữ không khả dụngunavailable

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

Đang chuẩn bị ví dụ…

Ví dụ trực tiếp cần JavaScript. Bạn vẫn có thể đọc đoạn mã bên dưới như hiện có.

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) => [`Đã lưu: ${JSON.stringify(value)}`, ...list]),
      (reason) => setResults((list) => [`Thất bại: ${reason.code ?? reason.message}`, ...list]),
    );

  return (
    <main>
      <label>
        Ghi chú
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>Lưu</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          Lưu ba lần
        </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>Kết quả</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('Ổ đĩa đã đầy');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

Tin cậy từ thiết kế

State theo từng tài liệu

Mỗi tài liệu đang mở cần state riêng, được giải phóng khi tài liệu đóng lại.

Điều cần để ý

Gõ vào tài liệu A rồi B: mỗi tài liệu giữ văn bản của riêng nó.
Đóng tài liệu A rồi mở lại: nó bắt đầu trống vì scope của nó đã bị hủy.

Bộ điều khiểnKhông thuộc mã ví dụ. Các giá trị đi vào ví dụ dưới dạng props.

Tài liệudocuments
Tài liệu A đang mởfirstOpen

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

Đang chuẩn bị ví dụ…

Ví dụ trực tiếp cần JavaScript. Bạn vẫn có thể đọc đoạn mã bên dưới như hiện có.

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="Chỉ được viết ở đây"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} ký tự`}</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={`Tài liệu ${name}`} />,
        )}
      </div>
    </main>
  );
}

State thuộc về component