restate / v1.0.0

Stanje, ki pripada komponenti

Vsakemu dokumentu, pogovornemu oknu ali zahtevi dajte lastne storeje, ki nastanejo s komponento in se po njenem odklopu sprostijo.

Na tej strani

useRestateScope Pravila za factory Začetne vrednosti iz props Upodabljanje na strežniku Čakanje na shranjene podatke dokumenta Preizkusite Lastniki zunaj Reacta

useRestateScope

Factory deklarira storeje in jih vrne. restate hrani rezultat med upodobitvami in po odklopu komponente uniči scope. Ni treba pisati nobene zapiralne funkcije ali effecta za čiščenje.

Dva elementa Document imata neodvisni stanji. Če želite dokument deliti z otroki, podajte vrnjene hooke prek props ali lastnega konteksta.

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 lahko factory pokliče večkrat in rezultate zavrže, zato naj bo sinhrona in čista.

Storeje deklarirajte v factoryju; vrnjene hooke kličite na najvišji ravni komponente.
Začetni props se preberejo enkrat, kot v inicializatorju useState.
Komponenti dajte key, ko drug dokument potrebuje sveže stanje.
Brez factoryja useRestateScope() vrne stabilen scope za storeje, ki jih ustvarite pozneje v effectih ali obravnavah.

Začetne vrednosti iz props

Props uporabite kot začetne vrednosti, key Reacta pa za začetek znova z 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} />;

Podatke naložite v strežniški poti in jih podajte kot prop. Začetna vrednost je hkrati tudi posnetek s strežnika. V Next.js App Routerju ta hook spada v Client Component, ki se vseeno upodobi na strežniku.

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

Čakanje na shranjene podatke dokumenta

Shranjeni storeji v scopu začnejo obnovo, ko se komponenta na odjemalcu potrdi (commit), in niso del globalnega restateManager.ready. Počakajte na lastni manager.ready scopa znotraj meje nalaganja.

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

Preizkusite

Odpirajte in zapirajte dokumente in glejte, kako se njihovo stanje začne znova.

KrmilnikNi del kode primera. Vrednosti pridejo v primer kot props.

Dokumentidocuments
Dokument A je odprtfirstOpen

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

Pripravljanje primera …

Primeri v živo potrebujejo JavaScript. Kodo spodaj lahko preberete takšno, kot je.

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="Napisano samo tukaj"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`Znakov: ${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>
  );
}

Lastniki zunaj Reacta

Ko stanje pripada storitvi ali zahtevi na strežniku, scope ustvarite sami in na koncu pokličite destroy(). Uničenje scopa nikoli ne izbriše shranjenih zapisov.

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