restate / v1.0.0

Stare care aparține unei componente

Dați fiecărui document, dialog sau cereri store-uri proprii, create odată cu componenta și eliberate după demontarea ei.

Pe această pagină

useRestateScope Reguli pentru factory Valori inițiale din props Randare pe server Așteptarea datelor salvate ale documentului Încercați Proprietari în afara React

useRestateScope

Factory-ul declară store-uri și le returnează. restate păstrează rezultatul între randări și distruge scope-ul după demontarea componentei. Nu trebuie scrisă nicio funcție de închidere sau effect de curățare.

Două elemente Document au stări independente. Pentru a partaja un document cu copiii, transmiteți hook-urile returnate prin props sau prin propriul context.

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

Reguli pentru factory

React poate apela factory-ul de mai multe ori și poate arunca rezultatele, așa că păstrați-l sincron și pur.

Declarați store-urile în factory; apelați hook-urile returnate la nivelul superior al componentei.
props inițiale se citesc o singură dată, ca în inițializatorul lui useState.
Dați componentei un key când alt document are nevoie de o stare nouă.
Fără factory, useRestateScope() returnează un scope stabil pentru store-urile create mai târziu în effect-uri sau handlere.

Valori inițiale din props

Folosiți props ca valori inițiale și key-ul React pentru a reporni cu alt document.

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} />;

Randare pe server

Încărcați datele în ruta de pe server și transmiteți-le ca prop. Valoarea inițială este și snapshotul serverului. În Next.js App Router, acest hook stă într-un Client Component, care se randează totuși pe server.

'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>;
}

Așteptarea datelor salvate ale documentului

Store-urile salvate dintr-un scope încep restaurarea când componenta face commit pe client și nu fac parte din restateManager.ready global. Așteptați manager.ready propriu al scope-ului într-o limită de încărcare.

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} />;
}

Încercați

Deschideți și închideți documente și vedeți cum le repornește starea.

ControlerNu face parte din codul exemplului. Valorile ajung în exemplu ca props.

Documentedocuments
Documentul A este deschisfirstOpen

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

Se pregătește exemplul…

Exemplele live au nevoie de JavaScript. Puteți citi codul de mai jos așa cum este.

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="Scris doar aici"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} caractere`}</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={`Documentul ${name}`} />,
        )}
      </div>
    </main>
  );
}

Proprietari în afara React

Când starea aparține unui serviciu sau unei cereri de pe server, creați singuri scope-ul și apelați destroy() la final. Distrugerea unui scope nu șterge niciodată înregistrările salvate.

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

Scris pentru API-ul restate 1.0