restate / v1.0.0

Γίνετε συνδρομητής μόνο σε ό,τι χρειάζεστε

Επιλέξτε από ποιο μέρος του store εξαρτάται κάθε component, συγκρίνετε αντικείμενα με shallow, ομαδοποιήστε αλλαγές με batch και συνδέστε εξωτερικά συμβάντα.

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

Δώστε έναν selector Δοκιμάστε το Επιλογή πολλών πεδίων με shallow Προσαρμοσμένη σύγκριση Ομαδοποίηση αλλαγών με batch Συνδρομή εκτός React Σύνδεση εξωτερικών συμβάντων

Δώστε έναν selector

Καλέστε το hook με μια συνάρτηση που επιλέγει ό,τι χρειάζεται το component. Μετά από κάθε αλλαγή, το restate εκτελεί τον selector και συγκρίνει το αποτέλεσμα με το προηγούμενο μέσω Object.is. Αν είναι ίσα, το component δεν αποδίδεται.

Η κάρτα αλλάζει. Αποδίδεται το ItemCount;

Όχι. Ο selector του επιστρέφει ακόμη τον ίδιο αριθμό προϊόντων, οπότε η επιλογή είναι ίση και το React δεν καλείται να αποδώσει.

const useCart = restate({ items: ['Book'], coupon: '', note: '' });

function ItemCount() {
  // Re-renders only when the number of items changes.
  const count = useCart((cart) => cart.items.length);
  return <p>{count} items</p>;
}

Δοκιμάστε το

Αλλάξτε πεδία και παρακολουθήστε τους μετρητές αποδόσεων. Απενεργοποιήστε το shallow για να δείτε έναν selector που επιστρέφει νέο αντικείμενο κάθε φορά.

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

Σύγκριση σύνοψης με shallowshallowSummary

<Example
  shallowSummary={true}
/>

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

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

App.jsx

import { memo, useRef } from 'react';
import { restate, shallow } from '@kkwaenggwari/restate';
import './styles.css';

const useCart = restate({ items: ['Book'], coupon: '', note: '' });

function Card({ title, value }) {
  const renders = useRef(0);
  renders.current += 1;

  return (
    <section className="card">
      <span>{title}</span>
      <output>{value}</output>
      <small>{`Αποδόσεις: ${renders.current}`}</small>
    </section>
  );
}

const ItemCount = memo(function ItemCount() {
  const count = useCart((cart) => cart.items.length);
  return <Card title="Προϊόντα" value={count} />;
});

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="Κουπόνι" value={coupon || 'κανένα'} />;
});

const Summary = memo(function Summary({ compare }) {
  const summary = useCart((cart) => ({ count: cart.items.length, coupon: cart.coupon }), compare);
  return <Card title="Σύνοψη" value={`${summary.count} · ${summary.coupon || '-'}`} />;
});

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Ολόκληρο το store" value={cart.note.length} />;
});

export default function Example({ shallowSummary = true }) {
  return (
    <main>
      <div className="grid">
        <ItemCount />
        <Coupon />
        <Summary compare={shallowSummary ? shallow : undefined} />
        <Whole />
      </div>
      <div className="actions">
        <button onClick={() => useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }))}>
          Προσθήκη προϊόντος
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Εναλλαγή κουπονιού
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Επεξεργασία κάρτας
        </button>
      </div>
    </main>
  );
}

Επιλογή πολλών πεδίων με shallow

Όταν ένας selector κατασκευάζει αντικείμενο, επιστρέφει νέο κάθε φορά, οπότε το Object.is βλέπει πάντα αλλαγή. Δώστε το shallow ως δεύτερο όρισμα: συγκρίνει τα ίδια πεδία του αντικειμένου σε βάθος ενός επιπέδου.

Το shallow συγκρίνει επίσης σε βάθος ενός επιπέδου τα στοιχεία πινάκων, Map και Set.

import { restate, shallow } from '@kkwaenggwari/restate';

function CartSummary() {
  const { count, coupon } = useCart(
    (cart) => ({ count: cart.items.length, coupon: cart.coupon }),
    shallow,
  );
  return (
    <p>
      {count} items · {coupon || 'no coupon'}
    </p>
  );
}

Προσαρμοσμένη σύγκριση

Οποιαδήποτε συνάρτηση (left, right) => boolean κάνει ως δεύτερο όρισμα. Χρησιμοποιήστε την όταν το shallow δεν αρκεί, για παράδειγμα για σύγκριση λίστας με βάση το id.

const ids = useCart(
  (cart) => cart.items.map((item) => item.id),
  (left, right) => left.length === right.length && left.every((id, index) => id === right[index]),
);

Ομαδοποίηση αλλαγών με batch

Κάθε set ειδοποιεί αμέσως τους συνδρομητές. Όταν μια ενέργεια αλλάζει πολλά stores, τυλίξτε την σε batch: η μνήμη ενημερώνεται αμέσως και οι συνδρομητές εκτελούνται μία φορά μετά το callback.

import { batch } from '@kkwaenggwari/restate';

function checkout() {
  batch(() => {
    useCart.set((cart) => ({ ...cart, items: [] }));
    useOrder.set((order) => ({ ...order, status: 'paid' }));
  });
  // Subscribers run once, after both stores changed.
}

Συνδρομή εκτός React

Το subscribeSelector σας καλεί μόνο όταν αλλάζει η επιλεγμένη τιμή, με την ίδια προαιρετική συνάρτηση σύγκρισης.

const stop = useCart.subscribeSelector(
  (cart) => cart.items.length,
  (count, previous) => analytics.track('cart-size', { count, previous }),
);

Σύνδεση εξωτερικών συμβάντων

Το δεύτερο όρισμα του restate μπορεί να είναι updater. Εκτελείται όταν το πρώτο component ή ο πρώτος συνδρομητής αρχίζει να ακούει, και ο καθαρισμός του εκτελείται όταν σταματά ο τελευταίος, οπότε συμβάντα του προγράμματος περιήγησης, sockets ή αισθητήρες συνδέονται μόνο όσο χρειάζεται.

Για χειροκίνητο έλεγχο χρησιμοποιήστε start() και stop().

import { restate } from '@kkwaenggwari/restate';

// Listens while at least one component or subscriber uses the store.
export const useOnline = restate(true, ({ setState }) => {
  const update = () => setState(navigator.onLine);
  window.addEventListener('online', update);
  window.addEventListener('offline', update);
  update();
  return () => {
    window.removeEventListener('online', update);
    window.removeEventListener('offline', update);
  };
});

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