restate / v1.0.0

Estado que pertence a um componente

Dê a cada documento, diálogo ou requisição os próprios stores, criados com o componente e liberados depois da desmontagem.

Nesta página

useRestateScope Regras da factory Valores iniciais a partir de props Renderização no servidor Espere os dados salvos de um documento Experimente Donos fora do React

useRestateScope

A factory declara stores e os retorna. O restate guarda o resultado entre renders e destrói o scope depois que o componente é desmontado. Não há função de fechamento nem efeito de limpeza para escrever.

Dois elementos Document têm estados independentes. Para compartilhar um documento com os filhos, passe os hooks retornados por props ou pelo seu próprio contexto.

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

Regras da factory

O React pode chamar a factory mais de uma vez e descartar resultados, então mantenha-a síncrona e pura.

Declare os stores na factory; chame os hooks retornados no nível superior do componente.
As props iniciais são lidas uma vez, como num inicializador de useState.
Dê uma key ao componente quando outro documento precisar de estado novo.
Sem factory, useRestateScope() retorna um scope estável para stores que você criar depois, em efeitos ou handlers.

Valores iniciais a partir de props

Use props como valores iniciais e uma key do React para recomeçar com outro documento.

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

Renderização no servidor

Carregue os dados na sua rota do servidor e passe como prop. O valor inicial também fornece o snapshot do servidor. No App Router do Next.js, este hook fica em um Client Component, que também é renderizado no servidor.

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

Espere os dados salvos de um documento

Stores salvos em um scope começam a restaurar depois que o componente é confirmado no cliente e não fazem parte do restateManager.ready global. Espere o manager.ready do próprio scope em um limite de carregamento.

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

Experimente

Abra e feche documentos e veja o estado deles recomeçar.

ControladorNão faz parte do código do exemplo. Os valores chegam ao exemplo como props.

Documentosdocuments
Documento A abertofirstOpen

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

Preparando o exemplo…

Os exemplos ao vivo precisam de JavaScript. O código abaixo pode ser lido como está.

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="Digitado só aqui"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length} caracteres`}</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={`Documento ${name}`} />,
        )}
      </div>
    </main>
  );
}

Donos fora do React

Quando um serviço ou uma requisição do servidor é dono do estado, crie o scope você mesmo e chame destroy() ao terminar. Destruir um scope nunca apaga registros salvos.

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

Escrito para a API do restate 1.0