useEvent

Реакт-хук, который привязывает событие к текущему 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/scope'

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/scope'

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/scope'

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'),
)

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