Trình bao React

Một provider và hai hook đặt trên SDK TypeScript. Nó cài một client cho mỗi trang, nên chế độ nghiêm ngặt của React không nhân đôi sự kiện của bạn.

Nơi phát hành

@prodantix/react on npm. It wraps @prodantix/sdk, so install both.

Cài đặt

bun add @prodantix/sdk @prodantix/react

Provider

Hãy gắn ProdantixProvider một lần, gần gốc. Nó tạo client web ở lần gắn đầu tiên rồi dùng lại sau đó, vì tạo cái thứ hai sẽ vá History API hai lần và nhân đôi mọi sự kiện được thu tự động.

import { ProdantixProvider } from '@prodantix/react';

export const Providers = ({ children }: { children: ReactNode }) => (
  <ProdantixProvider
    options={{
      apiKey: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
      host: 'https://eu.api.prodantix.com',
      messengerHost: 'https://eu.edge.prodantix.com',
    }}
  >
    {children}
  </ProdantixProvider>
);

Nêu tên người đang đăng nhập

person cho provider biết ai đang đăng nhập, dưới dạng một prop chứ không phải một lời gọi, nên việc đăng nhập và đăng xuất tới được client đúng như những giá trị vốn có. Nó có ba trạng thái và mỗi trạng thái nói một điều khác nhau. undefined nghĩa là bề mặt này chưa biết, vì phần xác thực của nó vẫn đang hydrate, và provider không làm gì cả. Một giá trị nghĩa là định danh: provider gọi identify ở giá trị đầu tiên và gọi lại mỗi khi distinctId đổi, mang theo các đặc điểm của chính SDK là ảnh đại diện, email, tên và điện thoại. null nghĩa là bề mặt đã hỏi một phiên và không thấy ai, và provider chỉ đặt lại client khi và chỉ khi nó vẫn còn được định danh; việc đó xoay id ẩn danh để khách kế tiếp trên trình duyệt ấy không còn là người vừa đăng xuất. Chính quy tắc đó giữ cho việc đăng xuất có hiệu lực ở nơi mà đăng xuất là một lần điều hướng cứng và không bao giờ có bước chuyển từ giá trị sang null được dựng ra. Đó cũng là lý do null không bao giờ được mang nghĩa đang tải: một người đang đăng nhập mà tải lại trang sẽ bị đặt lại trước khi phần xác thực kịp hydrate. Một lần gắn không hỏi phiên nào cả, một trang đích hay một trang tài liệu, hãy truyền undefined, và một prop vắng mặt vốn đã được đọc là undefined.

import { ProdantixProvider } from '@prodantix/react';

export const Providers = ({ children }: { children: ReactNode }) => {
  const { session, status } = useSession();

  // undefined while auth hydrates, null once it has resolved to nobody,
  // the subject once it has resolved to someone.
  const person = status === 'loading' ? undefined : session ? { distinctId: session.sub } : null;

  return (
    <ProdantixProvider
      options={{
        apiKey: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
        host: 'https://eu.api.prodantix.com',
        person,
      }}
    >
      {children}
    </ProdantixProvider>
  );
};

Các hook

useProdantix trả về client của trang, hoặc null khi ở phía máy chủ, trước khi effect chạy, và bên ngoài provider. useMessenger trả về handle để mở và đóng tiện ích, và vẫn là null cho tới khi cấu hình dự án được đọc và cho biết đã bật.

import { useMessenger, useProdantix } from '@prodantix/react';

export const HelpButton = () => {
  const prodantix = useProdantix();
  const messenger = useMessenger();

  // Both are null until the provider effect has run, so neither is assumed.
  return (
    <button
      onClick={() => {
        prodantix?.capture('help.opened');
        messenger?.open();
      }}
      type="button"
    >
      Get help
    </button>
  );
};

Khi nó không gửi gì

Một ứng dụng vẫn phát hành y như vậy khi tắt Prodantix, nên thiếu khoá hay host không phải là lỗi. prodantixConfig cho biết cả hai giá trị có mặt hay không, còn skipReason nói trong một dòng vì sao lần gắn này sẽ không gửi gì, thay vì lặng lẽ trả về.

import { prodantixConfig, skipReason } from '@prodantix/react';

const env = {
  host: process.env.NEXT_PUBLIC_PRODANTIX_HOST,
  key: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
};

// null when either value is missing: the app runs with Prodantix switched off.
if (prodantixConfig(env) === null) {
  console.warn(skipReason(env, null));
}