Що таке Effector?
Effector - це сучасна бібліотека для управління станом у JavaScript та React-застосунках. Вона дає змогу описувати бізнес-логіку застосунку через реактивні дані та події, при цьому забезпечуючи високу продуктивність, передбачуваність і масштабованість.
Основні концепції Effector
- Store (сховище)
- Аналог
state, але працює реактивно. - Зберігає дані та оновлюється тільки через події або ефекти.
javascript
import { createStore } from 'effector'
const $counter = createStore(0)- Event (подія)
- Описує зміну стану - те, що "відбувається" в системі.
- Може бути викликана з UI, API або іншого коду.
javascript
import { createEvent } from 'effector'
const increment = createEvent()- 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()
})- Sample
- Механізм зв'язування подій і сховищ: коли відбувається одна подія, можна "семплувати" поточне значення іншого стора.
javascript
import { sample } from 'effector'
sample({
clock: increment,
source: $counter,
fn: count => count + 1,
target: $counter,
})- 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) здаються громіздкими або неефективними.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.