useEvent

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

Используется с ssr, импортируется из effector-react/ssr

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>

Аргументы#

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

Возвращает#

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

Пример#

import ReactDOM from 'react-dom'
import {createDomain, fork} from 'effector'
import {useStore, useEvent, Provider} from 'effector-react/ssr'

const app = createDomain()

const inc = app.createEvent()
const $count = app.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(app)
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>]

Аргументы#

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

Возвращает#

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

Пример#

import ReactDOM from 'react-dom'
import {createDomain, fork} from 'effector'
import {useStore, useEvent, Provider} from 'effector-react/ssr'

const app = createDomain()

const inc = app.createEvent()
const dec = app.createEvent()
const $count = app
  .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(app)
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>}

Аргументы#

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

Возвращает#

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

Пример#

import ReactDOM from 'react-dom'
import {createDomain, fork} from 'effector'
import {useStore, useEvent, Provider} from 'effector-react/ssr'

const app = createDomain()

const inc = app.createEvent()
const dec = app.createEvent()
const $count = app
  .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(app)
ReactDOM.render(
  <Provider value={scope}>
    <App />
  </Provider>,
  document.getElementById('root'),
)

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