restate / v1.0.0

Tilaa vain se, mitä tarvitset

Valitse, mistä storen osasta kukin komponentti riippuu, vertaa objekteja shallow-funktiolla, ryhmittele muutokset batchilla ja kytke ulkoiset tapahtumat.

Tällä sivulla

Anna selector Kokeile Usean kentän valitseminen shallow-funktiolla Oma vertailu Muutosten ryhmittely batchilla Tilaaminen Reactin ulkopuolella Ulkoisten tapahtumien kytkeminen

Anna selector

Kutsu hookia funktiolla, joka valitsee sen, mitä komponentti tarvitsee. Jokaisen muutoksen jälkeen restate ajaa selectorin ja vertaa tulosta edelliseen Object.is-vertailulla. Jos ne ovat samat, komponentti ei renderöidy.

Kortti muuttuu. Renderöityykö ItemCount?

Ei. Sen selector palauttaa yhä saman tuotemäärän, joten valinta on sama eikä Reactia pyydetä renderöimään.

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

Kokeile

Muuta kenttiä ja seuraa renderöintilaskureita. Poista shallow käytöstä nähdäksesi selectorin, joka palauttaa joka kerta uuden objektin.

OhjainEi osa esimerkkikoodia. Arvot tulevat esimerkille props-muodossa.

Vertaa yhteenvetoa shallow-vertailullashallowSummary

<Example
  shallowSummary={true}
/>

Valmistellaan esimerkkiä…

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

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>{`Renderöinnit: ${renders.current}`}</small>
    </section>
  );
}

const ItemCount = memo(function ItemCount() {
  const count = useCart((cart) => cart.items.length);
  return <Card title="Tuotteet" value={count} />;
});

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="Kuponki" value={coupon || 'ei mitään'} />;
});

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Koko 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'] }))}>
          Lisää tuote
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Vaihda kuponki
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Muokkaa korttia
        </button>
      </div>
    </main>
  );
}

Usean kentän valitseminen shallow-funktiolla

Kun selector rakentaa objektin, se palauttaa joka kerta uuden, joten Object.is näkee aina muutoksen. Anna shallow toisena argumenttina: se vertaa objektin omia kenttiä yhden tason syvyydeltä.

shallow vertaa yhden tason syvyydeltä myös taulukoiden, Map- ja Set-rakenteiden alkioita.

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

Oma vertailu

Toisena argumenttina kelpaa mikä tahansa (left, right) => boolean -funktio. Käytä sitä, kun shallow ei riitä, esimerkiksi listan vertaamiseen id:n perusteella.

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

Muutosten ryhmittely batchilla

Jokainen set ilmoittaa tilaajille heti. Kun yksi toiminto muuttaa useita storeja, kääri se batchiin: muisti päivittyy heti, ja tilaajat suoritetaan kerran callbackin jälkeen.

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.
}

Tilaaminen Reactin ulkopuolella

subscribeSelector kutsuu sinua vain, kun valittu arvo muuttuu, samalla valinnaisella vertailufunktiolla.

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

Ulkoisten tapahtumien kytkeminen

restaten toinen argumentti voi olla updater. Se käynnistyy, kun ensimmäinen komponentti tai tilaaja alkaa kuunnella, ja sen siivous suoritetaan, kun viimeinen lopettaa, joten selaintapahtumat, socketit tai anturit ovat kytkettyinä vain tarvittaessa.

Käytä käsiohjaukseen start()- ja stop()-funktioita.

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

Kirjoitettu restate 1.0 -rajapinnalle (API)