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

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

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

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

Контент

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

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

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

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

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

Функція `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`, інакше - ігноруй".

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

Для рев’юера

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

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