useEvent

Стабильный · с 0.1.0

Возвращает стабильный callback, зажигающий типизированное событие на триггере. Идентичность сохраняется между рендерами, поэтому передавать его в массивы зависимостей useEffect безопасно.

Импорт

import { useEvent } from '@triggery/react';

Сигнатура

function useEvent<S extends TriggerSchema, K extends EventKey<S>>(
  trigger: Trigger<S>,
  eventName: K,
): EventMap<S>[K] extends void
  ? () => void
  : (payload: EventMap<S>[K]) => void;

Тип возвращаемого значения выводится из схемы триггера. События с void-payload возвращают эмиттер () => void; иначе эмиттер принимает типизированный payload.

Параметры

Параметр	Тип	Описание
`trigger`	`Trigger<S>`	Триггер, возвращённый из `createTrigger`.
`eventName`	`K extends EventKey<S>`	Должно быть одним из ключей, перечисленных в схеме `events` триггера и в массиве `events: [...]`.

Возвращает

Стабильную функцию-эмиттер:

void payload → () => void
Типизированный payload → (payload: …) => void

Функция обёрнута в useCallback, поэтому её идентичность не меняется, пока неизменны runtime и eventName.

Примеры

Обычный payload

import { createTrigger } from '@triggery/core';
import { useEvent } from '@triggery/react';

const chatTrigger = createTrigger<{
  events: { 'new-message': { author: string; text: string } };
}>({
  id: 'chat',
  events: ['new-message'],
  handler() {},
});

function Chat() {
  const fire = useEvent(chatTrigger, 'new-message');
  return (
    <button type="button" onClick={() => fire({ author: 'Alice', text: 'hi' })}>
      simulate
    </button>
  );
}

Void-payload

import { createTrigger } from '@triggery/core';
import { useEvent } from '@triggery/react';

const readyTrigger = createTrigger<{
  events: { 'app:ready': void };
}>({
  id: 'app-ready',
  events: ['app:ready'],
  handler() {},
});

function Bootstrap() {
  const ready = useEvent(readyTrigger, 'app:ready');
  return <button onClick={() => ready()}>signal ready</button>;
}

Передача в другой эффект

import { useEvent } from '@triggery/react';
import { useEffect } from 'react';
import { messageTrigger } from './triggers/message.trigger';

function WebSocketAdapter({ socket }: { socket: WebSocket }) {
  const fireMessage = useEvent(messageTrigger, 'new-message');

  useEffect(() => {
    socket.addEventListener('message', e => fireMessage(JSON.parse(e.data)));
    return () => socket.removeEventListener('message', /* ... */ () => {});
  }, [socket, fireMessage]); // ← stable identity means this effect re-binds rarely
}

Замечания

См. также

useCondition Зарегистрировать pull-only геттер условия.

useAction Зарегистрировать обработчик действия.

Руководство по событиям Нарратив: планирование, батчинг, broadcast.

createNamedHooks Сокращение `useNewMessageEvent`.