Що таке "event" в Effector?

ReactJunior~1 хв читання

У Effector event - це подія, тобто сигнал про те, що щось відбулося в системі. Це основна одиниця, з якої починається будь-яка зміна даних.

Якщо говорити просто:

Event в Effector - це "тригер" (виклик дії), який запускає оновлення стору, effect чи інший процес.

1. Що таке event у контексті Effector

event - це функція, яка:

приймає payload (дані, пов'язані з подією),
сповіщає всі підписані store, effect чи інші event,
не змінює дані напряму, а лише повідомляє, що "щось відбулося".

2. Простий приклад

javascript

import { createEvent, createStore } from 'effector'

// створюємо подію
const increment = createEvent()

// створюємо store, який реагує на цю подію
const $count = createStore(0).on(increment, count => count + 1)

$count.watch(value => console.log('Count:', value))

increment() // Count: 1
increment() // Count: 2

Тут increment - це event, який "повідомляє" системі, що користувач хоче збільшити лічильник.

3. Передача даних (payload)

Події можуть нести дані (як action у Redux):

javascript

const addTodo = createEvent<string>()
const $todos = createStore<string[]>([])
  .on(addTodo, (state, todo) => [...state, todo])

addTodo('Buy milk')
addTodo('Exercise')

// $todos = ['Buy milk', 'Exercise']

Кожен виклик addTodo() з аргументом - це потік даних, що проходить через реактивну систему.

4. Підписка на подію

Подію можна "слухати" напряму:

javascript

addTodo.watch(todo => {
  console.log('Додали завдання:', todo)
})

Коли addTodo('Exercise') спрацює, .watch() виконається автоматично.

5. Використання подій для запуску ефектів

Подія часто слугує тригером для ефекту:

javascript

import { createEvent, createEffect, sample } from 'effector'

const fetchUserClicked = createEvent<number>()
const fetchUserFx = createEffect(async (id: number) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
})

// зв'язуємо подію з ефектом
sample({
  clock: fetchUserClicked,
  target: fetchUserFx,
})

Тепер при виклику fetchUserClicked(5) запуститься ефект fetchUserFx.

6. Event як реактивний потік

event - це не просто "виклик функції", а реактивне джерело даних, у якого можуть бути:

підписники (watch);
трансформації (map);
зв'язки (sample, forward).

Приклад:

javascript

const nameChanged = createEvent<string>()
const upperNameChanged = nameChanged.map(name => name.toUpperCase())

upperNameChanged.watch(console.log)

nameChanged('alex') // виведе "ALEX"

7. Відмінність від Redux action

	Effector event	Redux action
Тип	Функція	Об'єкт `{ type, payload }`
Виклик	`event(payload)`	`dispatch({ type, payload })`
Зберігає стан?	Ні	Ні
Чи можна трансформувати	Так (`map`, `filter`, `sample`)	Ні
Реактивність	Так (observable)	Ні (імперативно)

8. Взаємозв'язок з іншими сутностями

javascript

[event] → [store]
[event] → [effect]
[event] → [інше event]

Подія може бути джерелом даних для будь-якого реактивного елемента. Вона - початок потоку в архітектурі Effector.

Підсумок

Event в Effector - це реактивний сигнал про подію, що відбулася. Він не зберігає стан, а лише "повідомляє", що щось сталося, і запускає ланцюг реакцій: оновлення store, виклик effect тощо.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.