Счётчик

«Hello world» для Triggery. Две кнопки запускают события increment/decrement; компонент-счётчик реагирует через useAction и ререндерит сам себя. Больше ничего.

Открыть в StackBlitz Открыть пример на GitHub

Файловая раскладка

• README.md обзорное описание
• index.html точка входа Vite
• Директорияsrc/

  • App.tsx продьюсеры + реакторы
  • main.tsx точка входа
  • Директорияtriggers/

    • notification.trigger.ts правило

Триггер

src/triggers/counter.trigger.ts

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

export const counterTrigger = createTrigger<{
  events:  { increment: void; decrement: void };
  actions: { adjust: number };
}>({
  id: 'counter',
  events: ['increment', 'decrement'],
  handler({ event, actions }) {
    actions.adjust?.(event.name === 'increment' ? 1 : -1);
  },
});

Компоненты

src/Counter.tsx

import { useAction, useEvent } from '@triggery/react';
import { useState } from 'react';
import { counterTrigger } from './triggers/counter.trigger';

export function Counter() {
  const [count, setCount] = useState(0);

  const inc = useEvent(counterTrigger, 'increment');
  const dec = useEvent(counterTrigger, 'decrement');

  useAction(counterTrigger, 'adjust', delta => setCount(c => c + delta));

  return (
    <div>
      <button onClick={() => dec()}>−</button>
      <output>{count}</output>
      <button onClick={() => inc()}>+</button>
    </div>
  );
}

И это всё. Продьюсер и реактор тут просто живут в одном компоненте — но их можно и разнести, проводка останется той же. Смотри Пайплайн уведомлений, где их действительно приходится разделить.

Похожее

Пайплайн уведомлений Та же форма, но с тремя реакторами в трёх компонентах.

Тот же рецепт — Solid С createSignal от Solid.

Тот же рецепт — Vue Версия на Composition API.

Анатомия триггера Полный разбор конфига createTrigger.