restate / v1.0.0

Stanje koje pripada komponenti

Dajte svakom dokumentu, dijalogu ili zahtjevu vlastite storeove koji nastaju s komponentom i oslobađaju se nakon njezina demontiranja.

Na ovoj stranici

useRestateScope Pravila za factory Početne vrijednosti iz props Renderiranje na poslužitelju Čekanje spremljenih podataka dokumenta Isprobajte Vlasnici izvan Reacta

useRestateScope

Factory deklarira storeove i vraća ih. restate čuva rezultat između renderiranja i uništava scope nakon demontiranja komponente. Nema funkcije zatvaranja ni effecta za čišćenje koje treba pisati.

Dva elementa Document imaju neovisna stanja. Da biste dokument podijelili s djecom, predajte vraćene hookove kroz props ili vlastiti kontekst.

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

Pravila za factory

React može pozvati factory više puta i odbaciti rezultate, pa neka bude sinkrona i čista.

Deklarirajte storeove u factoryju; vraćene hookove pozivajte na najvišoj razini komponente.
Početni props čitaju se jednom, kao u inicijalizatoru useState.
Dajte komponenti key kad drugi dokument treba svježe stanje.
Bez factoryja useRestateScope() vraća stabilan scope za storeove koje stvorite kasnije u effectima ili rukovateljima.

Početne vrijednosti iz props

Koristite props kao početne vrijednosti i Reactov key da biste počeli ispočetka s drugim dokumentom.

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

Učitajte podatke u ruti poslužitelja i predajte ih kao prop. Početna vrijednost ujedno daje snimku s poslužitelja. U Next.js App Routeru ovaj hook ide u Client Component, koji se ipak renderira na poslužitelju.

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

Čekanje spremljenih podataka dokumenta

Spremljeni storeovi u scopeu počinju vraćanje nakon što se komponenta committa na klijentu i nisu dio globalnog restateManager.ready. Pričekajte vlastiti manager.ready scopea unutar granice učitavanja.

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

Isprobajte

Otvarajte i zatvarajte dokumente i gledajte kako im stanje počinje ispočetka.

KontrolerNije dio koda primjera. Vrijednosti stižu u primjer kao props.

Dokumentidocuments
Dokument A otvorenfirstOpen

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

Priprema primjera…

Primjeri uživo trebaju JavaScript. Kod ispod možete čitati takav kakav jest.

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="Pisano samo ovdje"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`Znakova: ${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={`Dokument ${name}`} />,
        )}
      </div>
    </main>
  );
}

Vlasnici izvan Reacta

Kad stanje pripada servisu ili zahtjevu na poslužitelju, sami stvorite scope i na kraju pozovite destroy(). Uništavanje scopea nikad ne briše spremljene zapise.

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

Napisano za API restate 1.0