Устаревшее API

Рекомендуется использовать хук useUnit.

Реакт-хук, который привязывает событие к текущему scope для использования в обработчиках событий

Используется с серверным рендерингом и в тестировании, импортируется из effector-react/scope

useEvent(unit)

Привязывает юнит к скоупу компонента

Формула

declare const event: Event<T>
declare const fx: Effect<T, S>


const eventFn = useEvent(/*unit*/ event)
-> (data: T) => T


const fxFn = useEvent(/*unit*/ fx)
-> (data: T) => Promise<S>

Аргументы

  1. unit: Событие или эффект для привязки к скоупу компонента

Возвращает

Функцию для запуска юнита в скоупе компонента

Пример

import ReactDOM from "react-dom";
import { createEvent, createStore, fork } from "effector";
import { useStore, useEvent, Provider } from "effector-react";


const inc = createEvent();
const $count = createStore(0).on(inc, (x) => x + 1);


const App = () => {
  const count = useStore($count);
  const incFn = useEvent(inc);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => incFn()}>increment</button>
    </>
  );
};


const scope = fork();


ReactDOM.render(
  <Provider value={scope}>
    <App />
  </Provider>,
  document.getElementById("root"),
);

Запустить пример

useEvent([a, b])

Привязывает массив событий или эффектов к скоупу компонента

Формула

declare const a: Event<T>
declare const bFx: Effect<T, S>


const [aFn, bFn] = useEvent(/*list*/ [a, bFx])
-> [(data: T) => T, (data: T) => Promise<S>]

Аргументы

  1. list: Массив событий или эффектов

Возвращает

Массив функций для запуска юнитов в скоупе компонента

Пример

import ReactDOM from "react-dom";
import { createEvent, createStore, fork } from "effector";
import { useStore, useEvent, Provider } from "effector-react";


const inc = createEvent();
const dec = createEvent();
const $count = createStore(0)
  .on(inc, (x) => x + 1)
  .on(dec, (x) => x - 1);


const App = () => {
  const count = useStore($count);
  const [incFn, decFn] = useEvent([inc, dec]);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => incFn()}>increment</button>
      <button onClick={() => decFn()}>decrement</button>
    </>
  );
};


const scope = fork();


ReactDOM.render(
  <Provider value={scope}>
    <App />
  </Provider>,
  document.getElementById("root"),
);

Запустить пример

useEvent({a, b})

Привязывает объект событий или эффектов к скоупу компонента

Формула

declare const a: Event<T>
declare const bFx: Effect<T, S>


const {a: aFn, b: bFn} = useEvent(/*shape*/ {a, b: bFx})
-> {a: (data: T) => T, b: (data: T) => Promise<S>}

Аргументы

  1. shape: Объект событий или эффектов

Возвращает

Объект функций для запуска юнитов в скоупе компонента

Пример

import ReactDOM from "react-dom";
import { createEvent, createStore, fork } from "effector";
import { useStore, useEvent, Provider } from "effector-react";


const inc = createEvent();
const dec = createEvent();
const $count = createStore(0)
  .on(inc, (x) => x + 1)
  .on(dec, (x) => x - 1);


const App = () => {
  const count = useStore($count);
  const handlers = useEvent({ inc, dec });
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => handlers.inc()}>increment</button>
      <button onClick={() => handlers.dec()}>decrement</button>
    </>
  );
};


const scope = fork();


ReactDOM.render(
  <Provider value={scope}>
    <App />
  </Provider>,
  document.getElementById("root"),
);

Запустить пример

Перевод поддерживается сообществом

Документация на английском языке - самая актуальная, поскольку её пишет и обновляет команда effector. Перевод документации на другие языки осуществляется сообществом по мере наличия сил и желания.

Помните, что переведенные статьи могут быть неактуальными, поэтому для получения наиболее точной и актуальной информации рекомендуем использовать оригинальную англоязычную версию документации.

Соавторы
Commits