restate / v1.0.0

Yalnızca ihtiyacınız olana abone olun

Her bileşenin store'un hangi kısmına bağlı olduğunu seçin, nesneleri shallow ile karşılaştırın, değişiklikleri batch ile gruplayın ve dış olayları bağlayın.

Bu sayfada

Bir selector verin Deneyin shallow ile birkaç alan seçmek Özel karşılaştırma Değişiklikleri batch ile gruplamak React dışında abonelik Dış olayları bağlamak

Bir selector verin

Hook'u bileşenin ihtiyaç duyduğunu seçen bir fonksiyonla çağırın. Her değişiklikten sonra restate selector'ı çalıştırır ve sonucu öncekiyle Object.is ile karşılaştırır. İkisi eşitse bileşen render edilmez.

Kart değişiyor. ItemCount render edilir mi?

Hayır. Onun selector'ı hâlâ aynı ürün sayısını döndürür; seçim eşit olduğu için React'ten render istenmez.

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

Deneyin

Alanları değiştirin ve render sayaçlarını izleyin. Her seferinde yeni nesne döndüren bir selector'ı görmek için shallow'u kapatın.

DenetleyiciÖrnek kodun parçası değildir. Değerler örneğe props olarak ulaşır.

Özeti shallow ile karşılaştırshallowSummary

<Example
  shallowSummary={true}
/>

Örnek hazırlanıyor…

Canlı örnekler JavaScript gerektirir. Aşağıdaki kodu olduğu gibi okuyabilirsiniz.

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

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

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

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Tüm 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'] }))}>
          Ürün ekle
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Kuponu değiştir
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Kartı düzenle
        </button>
      </div>
    </main>
  );
}

shallow ile birkaç alan seçmek

Bir selector nesne oluşturduğunda her seferinde yenisini döndürür, bu yüzden Object.is her zaman değişiklik görür. İkinci argüman olarak shallow verin: nesnenin kendi alanlarını bir düzey derinlikte karşılaştırır.

shallow dizilerin, Map ve Set'lerin öğelerini de bir düzey derinlikte karşılaştırır.

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

Özel karşılaştırma

İkinci argüman olarak herhangi bir (left, right) => boolean fonksiyonu kullanılabilir. shallow yetmediğinde, örneğin bir listeyi id ile karşılaştırmak için kullanın.

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

Değişiklikleri batch ile gruplamak

Her set aboneleri hemen bilgilendirir. Bir eylem birkaç store'u değiştirdiğinde onu batch ile sarın: bellek hemen güncellenir, aboneler callback'ten sonra bir kez çalışır.

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 dışında abonelik

subscribeSelector sizi yalnızca seçilen değer değiştiğinde, aynı isteğe bağlı karşılaştırma fonksiyonuyla çağırır.

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

Dış olayları bağlamak

restate'in ikinci argümanı bir updater olabilir. İlk bileşen ya da abone dinlemeye başladığında çalışır, temizliği ise sonuncusu durduğunda çalışır; böylece tarayıcı olayları, soketler ya da sensörler yalnızca gerektiği sürece bağlı kalır.

Elle denetim için start() ve stop() kullanın.

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

restate 1.0 API'si için yazıldı