restate / v1.0.0

Bileşene ait durum

Her belgeye, iletişim kutusuna ya da isteğe kendi store'larını verin; bileşenle oluşturulsun ve ayrıldıktan sonra serbest bırakılsın.

Bu sayfada

useRestateScope Factory kuralları props'tan başlangıç değerleri Sunucu tarafı render Belgenin kayıtlı verilerini beklemek Deneyin React dışındaki sahipler

useRestateScope

Factory store'ları bildirip döndürür. restate sonucu render'lar arasında tutar ve bileşen ayrıldıktan sonra scope'u yok eder. Kapatma fonksiyonu ya da temizlik effect'i yazmak gerekmez.

İki Document öğesinin bağımsız durumu vardır. Bir belgeyi alt öğelerle paylaşmak için döndürülen hook'ları props ya da kendi context'iniz üzerinden iletin.

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

function Document() {
  const { useDraft, useSelection } = useRestateScope((scope) => ({
    useDraft: restate('', { scope }),
    useSelection: restate(0, { scope }),
  }));
  const text = useDraft();
  const selection = useSelection();

  return (
    <section>
      <input value={text} onChange={(event) => useDraft.set(event.target.value)} />
      <button onClick={() => useSelection.set((n) => n + 1)}>Selection: {selection}</button>
    </section>
  );
}

Factory kuralları

React factory'yi birden çok kez çağırıp sonuçları atabilir; bu yüzden onu senkron ve saf tutun.

Store'ları factory içinde bildirin; döndürülen hook'ları bileşenin en üst düzeyinde çağırın.
Başlangıç props'ları, useState başlatıcısında olduğu gibi bir kez okunur.
Başka bir belge taze bir duruma ihtiyaç duyduğunda bileşene bir key verin.
Factory olmadan useRestateScope(), sonradan effect'lerde ya da işleyicilerde oluşturacağınız store'lar için sabit bir scope döndürür.

props'tan başlangıç değerleri

props'u başlangıç değeri olarak, React key'ini ise başka bir belgeyle yeniden başlamak için kullanın.

function Editor({ document }) {
  // The initial value is captured once, like a useState initializer.
  const useTitle = useRestateScope((scope) => restate(document.title, { scope }));
  const title = useTitle();
  return <input value={title} onChange={(event) => useTitle.set(event.target.value)} />;
}

// A different document gets fresh state.
<Editor key={document.id} document={document} />;

Verileri sunucu rotasında yükleyip prop olarak iletin. Başlangıç değeri aynı zamanda sunucu anlık görüntüsüdür. Next.js App Router'da bu hook, yine de sunucuda render edilen bir Client Component içinde yer alır.

'use client';

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

export default function Profile({ user }) {
  const useProfile = useRestateScope((scope) => restate(user, { scope }));
  const profile = useProfile();
  return <p>{profile.name}</p>;
}

Belgenin kayıtlı verilerini beklemek

Scope içindeki kayıtlı store'lar, bileşen istemcide commit edildiğinde geri yüklemeye başlar ve genel restateManager.ready'nin parçası değildir. Bir yükleme sınırı içinde scope'un kendi manager.ready'sini bekleyin.

import { useEffect, useState } from 'react';
import { persistedRestate, useRestateScope } from '@kkwaenggwari/restate';

function Document({ documentId }) {
  const { manager, useDraft } = useRestateScope((scope) => ({
    manager: scope.manager,
    useDraft: persistedRestate('', { scope, namespace: 'documents', key: documentId }),
  }));
  const [state, setState] = useState('loading');

  useEffect(() => {
    let active = true;
    manager.ready.then(
      () => active && setState('ready'),
      () => active && setState('error'),
    );
    return () => {
      active = false;
    };
  }, [manager]);

  if (state === 'error') return <p>Could not load this document.</p>;
  if (state === 'loading') return <p>Loading document…</p>;
  return <Editor useDraft={useDraft} />;
}

Deneyin

Belgeleri açıp kapatın ve durumlarının nasıl yeniden başladığını görün.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

Belgelerdocuments
A belgesi açıkfirstOpen

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

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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="Yalnızca burada yazıldı"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} karakter`}</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={`Belge ${name}`} />,
        )}
      </div>
    </main>
  );
}

React dışındaki sahipler

Durum bir servise ya da sunucu isteğine ait olduğunda scope'u kendiniz oluşturun ve sonunda destroy() çağırın. Bir scope'u yok etmek kayıtlı kayıtları asla silmez.

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

export function createDocument(documentId) {
  const scope = createRestateScope();
  const useDraft = persistedRestate('', {
    scope,
    namespace: 'documents',
    key: documentId,
  });
  return {
    useDraft,
    manager: scope.manager,
    save: () => scope.manager.saveAll(),
    destroy: () => scope.destroy(),
  };
}

restate 1.0 API'si için yazıldı