restate / v1.0.0

Komponentui priklausanti būsena

Kiekvienam dokumentui, dialogui ar užklausai suteikite savus store, kurie sukuriami kartu su komponentu ir atlaisvinami jį atjungus.

Šiame puslapyje

useRestateScope factory taisyklės Pradinės reikšmės iš props Serverio atvaizdavimas Dokumento išsaugotų duomenų laukimas Išbandykite Savininkai už React ribų

useRestateScope

factory aprašo store ir juos grąžina. restate išlaiko rezultatą tarp perpiešimų ir sunaikina scope po komponento atjungimo. Nereikia rašyti uždarymo funkcijos ar valymo effect.

Du Document elementai turi nepriklausomą būseną. Norėdami bendrinti dokumentą su vaikais, perduokite grąžintus hook per props arba savo 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>
  );
}

factory taisyklės

React gali iškviesti factory daugiau nei kartą ir atmesti rezultatus, todėl ji turi būti sinchroninė ir gryna.

store aprašykite factory viduje; grąžintus hook kvieskite komponento viršutiniame lygyje.
Pradiniai props perskaitomi vieną kartą, kaip useState inicializatoriuje.
Suteikite komponentui key, kai kitam dokumentui reikia naujos būsenos.
Be factory useRestateScope() grąžina stabilų scope store, kuriuos sukursite vėliau effect ar apdorojimo funkcijose.

Pradinės reikšmės iš props

Naudokite props kaip pradines reikšmes, o React key – kad pradėtumėte iš naujo su kitu dokumentu.

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

Įkelkite duomenis serverio maršrute ir perduokite juos kaip prop. Pradinė reikšmė kartu yra ir serverio momentinė kopija. Next.js App Router šis hook priklauso Client Component, kuris vis tiek atvaizduojamas serveryje.

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

Dokumento išsaugotų duomenų laukimas

Scope išsaugoti store pradeda atkūrimą, kai komponentas kliente atlieka commit, ir nėra globalaus restateManager.ready dalis. Palaukite paties scope manager.ready įkėlimo ribose.

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

Išbandykite

Atidarykite ir uždarykite dokumentus ir pažiūrėkite, kaip jų būsena prasideda iš naujo.

ValdiklisNe pavyzdžio kodo dalis. Reikšmės į pavyzdį patenka kaip props.

Dokumentaidocuments
Dokumentas A atidarytasfirstOpen

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

Ruošiamas pavyzdys…

Gyviems pavyzdžiams reikia JavaScript. Žemiau esantį kodą galite skaityti tokį, koks yra.

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="Parašyta tik čia"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`Simbolių: ${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={`Dokumentas ${name}`} />,
        )}
      </div>
    </main>
  );
}

Savininkai už React ribų

Kai būsena priklauso paslaugai ar serverio užklausai, sukurkite scope patys ir pabaigoje iškvieskite destroy(). Sunaikinus scope išsaugoti įrašai niekada neištrinami.

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

Parašyta restate 1.0 API