Що робить guard()?

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

Функція guard() - це ще один ключовий "будівельний блок" Effector, поряд із sample() і forward().

Якщо коротко:

guard() - це фільтр для реактивних потоків. Він пропускає подію або ефект далі лише якщо виконано умову (filter).

1. Що робить `guard`

guard() приймає джерело (source) і умову (filter), і відправляє дані в target лише якщо умова істинна.

Метафора:

"Коли прийшли дані, перевір їх - і якщо все гаразд, пропусти далі."

2. Найпростіший приклад

javascript

import { createEvent, guard } from 'effector'

const numberEntered = createEvent<number>()
const evenNumberPassed = createEvent<number>()

guard({
  source: numberEntered,
  filter: (n) => n % 2 === 0,
  target: evenNumberPassed,
})

evenNumberPassed.watch((n) => console.log('Парне число:', n))

numberEntered(3) // не проходить
numberEntered(10) // Парне число: 10

Тут guard "пропускає" дані лише якщо число парне.

3. Основний синтаксис

javascript

guard({
  source,   // джерело даних (event, effect.doneData, store)
  filter,   // умова (функція або store<boolean>)
  target,   // куди направити, якщо filter = true
})

4. Приклад з `store`-фільтром

Фільтр може бути не функцією, а реактивним store<boolean>:

javascript

import { createStore, createEvent } from 'effector'

const submitClicked = createEvent()
const $isValid = createStore(false)
const formSubmit = createEvent()

guard({
  clock: submitClicked,
  filter: $isValid,
  target: formSubmit,
})

Тепер formSubmit() викличеться лише якщо $isValid === true.

5. Різниця між `source` і `clock`

У guard є 2 варіанти роботи - як у sample:

Параметр	Що робить
`source`	Звідки беремо дані
`clock`	Коли відбувається перевірка

Наприклад:

javascript

guard({
  source: $form,
  clock: submitClicked,
  filter: $isValid,
  target: sendFormFx,
})

Тобто:

"Коли клікнули submit, візьми дані з $form, і якщо $isValid істинний - відправ їх у sendFormFx."

6. guard() і sample()

Вони схожі, але guard() використовується, коли потрібно просто фільтрувати потік, а не ще й трансформувати дані.

	guard()	sample()
Ціль	Відфільтрувати потік	Семплювати дані при події
Має `fn` (трансформацію)?	Ні	Так
Основний сценарій	"Дозволити / заборонити"	"Взяти і перетворити"
Часто використовується для	Валідації, прав доступу	Логіки зв'язування

7. Приклад валідації форми

javascript

const submitClicked = createEvent()
const $form = createStore({ email: 'a@b.com', password: '12345' })
const $isValid = createStore(true)
const sendFormFx = createEffect(async (form) => api.send(form))

guard({
  source: $form,
  clock: submitClicked,
  filter: $isValid,
  target: sendFormFx,
})

Тут:

Коли клікнули "Submit",
Effector перевіряє $isValid,
Якщо true -> викликає sendFormFx($form).

8. Приклад фільтрації асинхронного результату

javascript

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

const userLoaded = createEvent<any>()

guard({
  source: fetchUserFx.doneData,
  filter: (user) => user.isActive,
  target: userLoaded,
})

Лише активні користувачі будуть передані в userLoaded.

9. Можна комбінувати з `forward` і `sample`

Наприклад:

javascript

const logoutClicked = createEvent()
const $isAuth = createStore(true)
const clearSessionFx = createEffect(api.logout)

guard({
  clock: logoutClicked,
  filter: $isAuth,
  target: clearSessionFx,
})

Тут guard перевіряє стан $isAuth, а з forward нам довелося б вручну фільтрувати.

10. Візуально (dataflow)

javascript

[source] → guard(filter = true) → [target]
[source] → guard(filter = false) (не проходить)

Підсумок

guard() - це реактивний фільтр в Effector, який пропускає дані далі лише якщо умову виконано.

Він особливо корисний для:

валідації даних перед запитами (filter: $isValid),
перевірки авторизації,
дозволу дій залежно від стану,
очищення потоку подій.

Формула для запам'ятовування

guard = "якщо filter -> пропусти source в target, інакше - ігноруй".

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

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

Premium

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