Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "event" в Effector?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

У **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 тощо.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати475 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.