restate / v1.0.0

Naročite se le na tisto, kar potrebujete

Izberite, od katerega dela storea je odvisna vsaka komponenta, primerjajte objekte s shallow, združujte spremembe z batch in povežite zunanje dogodke.

Na tej strani

Podajte selector Preizkusite Izbor več polj s shallow Lastna primerjava Združevanje sprememb z batch Naročnina zunaj Reacta Povezovanje zunanjih dogodkov

Podajte selector

Pokličite hook s funkcijo, ki izbere, kar komponenta potrebuje. Po vsaki spremembi restate zažene selector in rezultat primerja s prejšnjim z Object.is. Če sta enaka, se komponenta ne upodobi.

Kartica se spremeni. Se ItemCount upodobi?

Ne. Njegov selector še vedno vrne enako število izdelkov, zato je izbor enak in React ni pozvan k upodobitvi.

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

Preizkusite

Spreminjajte polja in spremljajte števce upodobitev. Izklopite shallow, da vidite selector, ki vsakič vrne nov objekt.

KrmilnikNi del kode primera. Vrednosti pridejo v primer kot props.

Primerjaj povzetek s shallowshallowSummary

<Example
  shallowSummary={true}
/>

Pripravljanje primera …

Primeri v živo potrebujejo JavaScript. Kodo spodaj lahko preberete takšno, kot je.

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

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

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="Kupon" value={coupon || 'nič'} />;
});

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Celoten 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'] }))}>
          Dodaj izdelek
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Preklopi kupon
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Uredi kartico
        </button>
      </div>
    </main>
  );
}

Izbor več polj s shallow

Ko selector sestavi objekt, vsakič vrne novega, zato Object.is vedno vidi spremembo. Podajte shallow kot drugi argument: primerja lastna polja objekta eno raven globoko.

shallow eno raven globoko primerja tudi elemente polj, Map in 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>
  );
}

Lastna primerjava

Kot drugi argument je primerna katera koli funkcija (left, right) => boolean. Uporabite jo, ko shallow ne zadošča, na primer za primerjavo seznama po id.

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

Združevanje sprememb z batch

Vsak set takoj obvesti naročnike. Ko eno dejanje spremeni več storejev, ga ovijte v batch: pomnilnik se takoj posodobi, naročniki pa se izvedejo enkrat po callbacku.

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

Naročnina zunaj Reacta

subscribeSelector vas pokliče le, ko se izbrana vrednost spremeni, z isto neobvezno funkcijo primerjave.

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

Drugi argument restate je lahko updater. Zažene se, ko prva komponenta ali naročnik začne poslušati, njegovo čiščenje pa se izvede, ko preneha zadnji, zato so dogodki brskalnika, vtičnice ali senzorji povezani le, dokler so potrebni.

Za ročno upravljanje uporabite start() in 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);
  };
});

Napisano za API restate 1.0