restate / v1.0.0

Κατάσταση που ανήκει σε component

Δώστε σε κάθε έγγραφο, παράθυρο διαλόγου ή αίτημα τα δικά του stores, που δημιουργούνται με το component και απελευθερώνονται μετά την αποπροσάρτησή του.

Σε αυτή τη σελίδα

useRestateScope Κανόνες για το factory Αρχικές τιμές από props Απόδοση στον διακομιστή Αναμονή των αποθηκευμένων δεδομένων ενός εγγράφου Δοκιμάστε το Κάτοχοι εκτός React

useRestateScope

Το factory δηλώνει stores και τα επιστρέφει. Το restate κρατά το αποτέλεσμα ανάμεσα στις αποδόσεις και καταστρέφει το scope μετά την αποπροσάρτηση του component. Δεν χρειάζεται συνάρτηση κλεισίματος ή effect καθαρισμού.

Δύο στοιχεία Document έχουν ανεξάρτητη κατάσταση. Για να μοιραστείτε ένα έγγραφο με τα παιδιά του, περάστε τα hooks που επιστρέφονται μέσω props ή δικού σας context.

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

Το React μπορεί να καλέσει το factory περισσότερες από μία φορές και να απορρίψει τα αποτελέσματα, οπότε κρατήστε το σύγχρονο και καθαρό.

Δηλώστε τα stores μέσα στο factory· καλέστε τα hooks που επιστρέφονται στο ανώτατο επίπεδο του component.
Τα αρχικά props διαβάζονται μία φορά, όπως στον αρχικοποιητή του useState.
Δώστε στο component ένα key όταν ένα άλλο έγγραφο χρειάζεται νέα κατάσταση.
Χωρίς factory, το useRestateScope() επιστρέφει ένα σταθερό scope για stores που δημιουργείτε αργότερα σε effects ή handlers.

Αρχικές τιμές από props

Χρησιμοποιήστε τα props ως αρχικές τιμές και το key του React για να ξεκινήσετε από την αρχή με άλλο έγγραφο.

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

Απόδοση στον διακομιστή

Φορτώστε δεδομένα στη διαδρομή του διακομιστή και περάστε τα ως prop. Η αρχική τιμή είναι και το στιγμιότυπο του διακομιστή. Στο Next.js App Router αυτό το hook ανήκει σε Client Component, που παρ' όλα αυτά αποδίδεται στον διακομιστή.

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

Αναμονή των αποθηκευμένων δεδομένων ενός εγγράφου

Τα αποθηκευμένα stores σε scope ξεκινούν την ανάκτηση όταν το component κάνει commit στον client και δεν ανήκουν στο καθολικό restateManager.ready. Περιμένετε το δικό του manager.ready του scope μέσα σε ένα όριο φόρτωσης.

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

Δοκιμάστε το

Ανοίξτε και κλείστε έγγραφα και δείτε πώς ξεκινά ξανά η κατάστασή τους.

ΕλεγκτήςΔεν είναι μέρος του κώδικα του παραδείγματος. Οι τιμές φτάνουν στο παράδειγμα ως props.

Έγγραφαdocuments
Το έγγραφο A είναι ανοιχτόfirstOpen

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

Προετοιμασία παραδείγματος…

Τα ζωντανά παραδείγματα χρειάζονται JavaScript. Μπορείτε να διαβάσετε τον κώδικα παρακάτω όπως είναι.

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="Γράφτηκε μόνο εδώ"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${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={`Έγγραφο ${name}`} />,
        )}
      </div>
    </main>
  );
}

Κάτοχοι εκτός React

Όταν η κατάσταση ανήκει σε υπηρεσία ή αίτημα διακομιστή, δημιουργήστε μόνοι σας το scope και καλέστε destroy() στο τέλος. Η καταστροφή ενός scope δεν διαγράφει ποτέ αποθηκευμένες εγγραφές.

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

Γραμμένο για το API του restate 1.0