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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке реактивність

**Реактивність** - це підхід, при якому система автоматично реагує на зміни даних.
Якщо одне значення залежить від іншого, воно **само оновлюється**, коли джерело змінилося.

Приклад у звичайному JS (не реактивно):

```javascript
let a = 2
let b = a * 2
a = 3
console.log(b) // все ще 4, потрібно перерахувати вручну
```

Приклад реактивного підходу:

```javascript
$a = createStore(2)
$b = $a.map(a => a * 2)

$a.setState(3)
console.log($b.getState()) // 6 - оновилося автоматично
```

У реактивній системі залежні значення **"підписані"** на джерела і **реагують** без ручних перерахунків.

---

## 2. Effector працює як потік даних (dataflow)

Effector будує **граф реактивних зв'язків**:

- `event` → викликає зміну;
- `store` → зберігає дані і реагує на події;
- `effect` → виконує асинхронну операцію;
- `sample` → зв'язує ці вузли в потік.

Кожна зміна запускає "реакцію" по ланцюжку залежностей.
Система гарантує, що обчислення виконуються **детерміновано і синхронно за порядком** - тобто результат завжди однаковий для однакового набору вхідних даних.

---

## 3. На відміну від звичайних менеджерів стану

| Підхід | Як працює |
|---|---|
| **Redux / Zustand** | Викликаєш `setState()` або `dispatch()` і вручну оновлюєш залежності. |
| **Effector** | Визначаєш, "як дані пов'язані", а не "коли їх змінювати" - система сама реагує. |

В Effector немає імперативних викликів "спочатку зміни X, потім Y".
Ти просто описуєш, **як Y залежить від X**, а бібліотека сама підтримує ці залежності.

---

## 4. Приклад реактивності на практиці

```javascript
import { createStore, createEvent, sample } from 'effector'

const nameChanged = createEvent<string>()
const $name = createStore('Tim').on(nameChanged, (_, name) => name)
const $greeting = $name.map(name => `Hello, ${name}!`)

$name.watch(console.log)      // реагує при кожній зміні
$greeting.watch(console.log)  // теж оновлюється автоматично

nameChanged('Alex')
// У консолі:
// Alex
// Hello, Alex!
```

Жодних ручних викликів, все оновилося "по ланцюжку" → **реактивно**.

---

## 5. Чому це важливо

- **Менше багів** - система сама відстежує залежності.
- **Менше зв'язності** між модулями - бізнес-логіка відокремлена від UI.
- **Легко масштабувати** - можна будувати складні графи даних без ручного контролю оновлень.
- **Можна робити SSR і багатошарові підписки** без колізій станів.

---

## 6. Суть в одній фразі

> Effector - це не просто "state manager", а **реактивна система керування станом**,
> де дані утворюють **граф залежностей**, що автоматично реагує на події.

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

Для рев’юера

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

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