restate / v1.0.0

Komponentille kuuluva tila

Anna jokaiselle dokumentille, dialogille tai pyynnölle omat storet, jotka luodaan komponentin mukana ja vapautetaan sen irrottamisen jälkeen.

Tällä sivulla

useRestateScope Factoryn säännöt Alkuarvot propseista Palvelinrenderöinti Dokumentin tallennettujen tietojen odottaminen Kokeile Omistajat Reactin ulkopuolella

useRestateScope

Factory määrittelee storet ja palauttaa ne. restate säilyttää tuloksen renderöintien välillä ja tuhoaa scopen komponentin irrottamisen jälkeen. Sulkemisfunktiota tai siivous-effectiä ei tarvitse kirjoittaa.

Kahdella Document-elementillä on itsenäinen tila. Jos haluat jakaa dokumentin lapsille, välitä palautetut hookit propseina tai omalla kontekstillasi.

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

Factoryn säännöt

React voi kutsua factorya useammin kuin kerran ja hylätä tuloksia, joten pidä se synkronisena ja puhtaana.

Määrittele storet factoryssa; kutsu palautettuja hookeja komponentin ylimmällä tasolla.
Alkuperäiset propsit luetaan kerran, kuten useStaten alustajassa.
Anna komponentille key, kun toinen dokumentti tarvitsee tuoreen tilan.
Ilman factorya useRestateScope() palauttaa vakaan scopen storeille, jotka luot myöhemmin effecteissä tai käsittelijöissä.

Alkuarvot propseista

Käytä propseja alkuarvoina ja Reactin keytä aloittaaksesi alusta toisella dokumentilla.

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

Palvelinrenderöinti

Lataa data palvelimen reitillä ja välitä se propsina. Alkuarvo on myös palvelimen tilannekuva. Next.js App Routerissa tämä hook kuuluu Client Componentiin, joka renderöidään silti palvelimella.

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

Dokumentin tallennettujen tietojen odottaminen

Scopen tallennetut storet aloittavat palautuksen, kun komponentti commitoidaan asiakkaalla, eivätkä ne kuulu globaaliin restateManager.ready-arvoon. Odota scopen omaa manager.ready-arvoa latausrajan sisällä.

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

Kokeile

Avaa ja sulje dokumentteja ja katso, miten niiden tila alkaa alusta.

OhjainEi osa esimerkkikoodia. Arvot tulevat esimerkille props-muodossa.

Dokumentitdocuments
Dokumentti A on aukifirstOpen

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

Valmistellaan esimerkkiä…

Live-esimerkit tarvitsevat JavaScriptiä. Voit lukea alla olevan koodin sellaisenaan.

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="Kirjoitettu vain tähän"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} merkkiä`}</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={`Dokumentti ${name}`} />,
        )}
      </div>
    </main>
  );
}

Omistajat Reactin ulkopuolella

Kun tila kuuluu palvelulle tai palvelinpyynnölle, luo scope itse ja kutsu lopuksi destroy(). Scopen tuhoaminen ei koskaan poista tallennettuja tietueita.

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

Kirjoitettu restate 1.0 -rajapinnalle (API)