restate / v1.0.0

Prenumeruokite tik tai, ko reikia

Pasirinkite, nuo kurios store dalies priklauso kiekvienas komponentas, lyginkite objektus su shallow, grupuokite pakeitimus su batch ir prijunkite išorinius įvykius.

Šiame puslapyje

Perduokite selector Išbandykite Kelių laukų pasirinkimas su shallow Savas palyginimas Pakeitimų grupavimas su batch Prenumerata už React ribų Išorinių įvykių prijungimas

Perduokite selector

Iškvieskite hook su funkcija, kuri pasirenka tai, ko reikia komponentui. Po kiekvieno pakeitimo restate paleidžia selector ir palygina rezultatą su ankstesniu per Object.is. Jei jie lygūs, komponentas neperpiešiamas.

Kortelė pasikeičia. Ar ItemCount perpiešiamas?

Ne. Jo selector vis dar grąžina tą patį prekių skaičių, todėl atranka lygi ir React neprašomas perpiešti.

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

Išbandykite

Keiskite laukus ir stebėkite perpiešimų skaitiklius. Išjunkite shallow, kad pamatytumėte selector, kuris kaskart grąžina naują objektą.

ValdiklisNe pavyzdžio kodo dalis. Reikšmės į pavyzdį patenka kaip props.

Lyginti suvestinę su shallowshallowSummary

<Example
  shallowSummary={true}
/>

Ruošiamas pavyzdys…

Gyviems pavyzdžiams reikia JavaScript. Žemiau esantį kodą galite skaityti tokį, koks yra.

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>{`Perpiešimai: ${renders.current}`}</small>
    </section>
  );
}

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

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="Kuponas" value={coupon || 'nėra'} />;
});

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Visas 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'] }))}>
          Pridėti prekę
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Perjungti kuponą
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Redaguoti kortelę
        </button>
      </div>
    </main>
  );
}

Kelių laukų pasirinkimas su shallow

Kai selector sukuria objektą, jis kaskart grąžina naują, todėl Object.is visada mato pakeitimą. Perduokite shallow kaip antrąjį argumentą: jis palygina paties objekto laukus vieno lygio gyliu.

shallow vieno lygio gyliu palygina ir masyvų, Map bei Set elementus.

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

Savas palyginimas

Antruoju argumentu tinka bet kuri (left, right) => boolean funkcija. Naudokite ją, kai shallow nepakanka, pavyzdžiui, sąrašui palyginti pagal id.

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

Pakeitimų grupavimas su batch

Kiekvienas set iškart praneša prenumeratoriams. Kai vienas veiksmas keičia kelis store, apgaubkite jį batch: atmintis atnaujinama iškart, o prenumeratoriai vykdomi vieną kartą po 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.
}

Prenumerata už React ribų

subscribeSelector iškviečia jus tik pasikeitus pasirinktai reikšmei, su ta pačia pasirinktine palyginimo funkcija.

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

Išorinių įvykių prijungimas

Antrasis restate argumentas gali būti updater. Jis paleidžiamas, kai pirmasis komponentas ar prenumeratorius pradeda klausytis, o jo išvalymas vykdomas, kai sustoja paskutinis, todėl naršyklės įvykiai, lizdai ar jutikliai prijungti tik tiek, kiek reikia.

Rankiniam valdymui naudokite start() ir 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);
  };
});

Parašyta restate 1.0 API