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

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

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

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

Контент

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

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

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

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

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

**Effector** - це сучасна бібліотека для управління станом у JavaScript та React-застосунках. Вона дає змогу описувати бізнес-логіку застосунку через **реактивні дані та події**, при цьому забезпечуючи **високу продуктивність, передбачуваність і масштабованість**.

---

### Основні концепції Effector

1. **Store (сховище)**
  - Аналог `state`, але працює реактивно.
  - Зберігає дані та оновлюється тільки через події або ефекти.

```javascript
  import { createStore } from 'effector'
  const $counter = createStore(0)
  ```
2. **Event (подія)**
  - Описує зміну стану - те, що "відбувається" в системі.
  - Може бути викликана з UI, API або іншого коду.

```javascript
  import { createEvent } from 'effector'
  const increment = createEvent()
  ```
3. **Effect (ефект)**
  - Використовується для асинхронних операцій (запити, таймери тощо).
  - Автоматично керує станом виконання (`pending`, `done`, `fail`).

```javascript
  import { createEffect } from 'effector'
  const fetchUserFx = createEffect(async (id: number) => {
    const res = await fetch(`/api/users/${id}`)
    return res.json()
  })
  ```
4. **Sample**
  - Механізм зв'язування подій і сховищ: коли відбувається одна подія, можна "семплувати" поточне значення іншого стора.

```javascript
  import { sample } from 'effector'
  sample({
    clock: increment,
    source: $counter,
    fn: count => count + 1,
    target: $counter,
  })
  ```
5. **Domain**
  - Контейнер для групування логіки (stores, events, effects) за областями.
  - Зручно використовувати у великих проєктах.

```javascript
  import { createDomain } from 'effector'
  const userDomain = createDomain()
  ```

---

### Переваги Effector

- **Висока продуктивність** (немає зайвих перерендерів).
- **Типобезпека** - відмінна інтеграція з TypeScript.
- **Детермінованість** - результат завжди передбачуваний.
- **Мінімальні сайд-ефекти** та строга реактивність.
- **SSR-сумісність** (Effector можна використовувати на сервері).
- **Гнучкість** - не нав'язує архітектуру (можна впровадити частково).

---

### Приклад використання з React

```javascript
import { createEvent, createStore } from 'effector'
import { useUnit } from 'effector-react'

const increment = createEvent()
const decrement = createEvent()
const $counter = createStore(0)
  .on(increment, count => count + 1)
  .on(decrement, count => count - 1)

function Counter() {
  const [count, inc, dec] = useUnit([$counter, increment, decrement])

return (
    <div>
      <p>{count}</p>
      <button onClick={inc}>+</button>
      <button onClick={dec}>−</button>
    </div>
  )
}
```

---

### Коли використовувати Effector

Effector особливо корисний, якщо:

- потрібне **жорстке розділення бізнес-логіки та UI**;
- проєкт великий, з **багаторівневим станом**;
- ви хочете **типобезпеку та передбачуваність даних**;
- стандартні рішення (Redux, Zustand) здаються громіздкими або неефективними.

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

Для рев’юера

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

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