restate / v1.0.0

Chỉ đăng ký những gì bạn cần

Chọn phần store mà mỗi component phụ thuộc, so sánh đối tượng bằng shallow, gom thay đổi bằng batch và nối các sự kiện bên ngoài.

Trên trang này

Truyền selector Thử ngay Chọn nhiều trường với shallow So sánh tùy chỉnh Gom thay đổi bằng batch Đăng ký bên ngoài React Nối sự kiện bên ngoài

Truyền selector

Gọi hook với một hàm chọn những gì component cần. Sau mỗi thay đổi, restate chạy selector và so sánh kết quả với lần trước bằng Object.is. Nếu bằng nhau, component không render.

Thẻ thay đổi. ItemCount có render không?

Không. selector của nó vẫn trả về cùng số lượng sản phẩm, nên phần chọn bằng nhau và React không được yêu cầu render.

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

Thử ngay

Thay đổi các trường và theo dõi bộ đếm render. Tắt shallow để thấy một selector luôn trả về đối tượng mới.

Bộ điều khiểnKhông thuộc mã ví dụ. Các giá trị đi vào ví dụ dưới dạng props.

So sánh tóm tắt bằng shallowshallowSummary

<Example
  shallowSummary={true}
/>

Đang chuẩn bị ví dụ…

Ví dụ trực tiếp cần JavaScript. Bạn vẫn có thể đọc đoạn mã bên dưới như hiện có.

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

const ItemCount = memo(function ItemCount() {
  const count = useCart((cart) => cart.items.length);
  return <Card title="Sản phẩm" value={count} />;
});

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="Mã giảm giá" value={coupon || 'không có'} />;
});

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

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="Toàn bộ 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'] }))}>
          Thêm sản phẩm
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          Bật/tắt mã giảm giá
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          Sửa thẻ
        </button>
      </div>
    </main>
  );
}

Chọn nhiều trường với shallow

Khi selector dựng một đối tượng, nó trả về đối tượng mới mỗi lần, nên Object.is luôn thấy thay đổi. Truyền shallow làm đối số thứ hai: nó so sánh các trường riêng của đối tượng ở độ sâu một cấp.

shallow cũng so sánh phần tử của mảng, Map và Set ở độ sâu một cấp.

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

So sánh tùy chỉnh

Bất kỳ hàm (left, right) => boolean nào cũng dùng được làm đối số thứ hai. Dùng khi shallow chưa đủ, ví dụ để so sánh danh sách theo id.

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

Gom thay đổi bằng batch

Mỗi lần set thông báo ngay cho bên đăng ký. Khi một hành động đổi nhiều store, hãy bọc nó trong batch: bộ nhớ cập nhật ngay, còn bên đăng ký chạy một lần sau 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.
}

Đăng ký bên ngoài React

subscribeSelector chỉ gọi bạn khi giá trị được chọn thay đổi, với cùng hàm so sánh tùy chọn.

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

Đối số thứ hai của restate có thể là một updater. Nó chạy khi component hoặc bên đăng ký đầu tiên bắt đầu lắng nghe, và phần dọn dẹp chạy khi bên cuối cùng dừng lại, nên sự kiện trình duyệt, socket hay cảm biến chỉ được nối khi cần.

Dùng start() và stop() để điều khiển thủ công.

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

Viết cho API restate 1.0