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

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

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

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

Контент

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

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

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

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

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

## 1. Що таке `forward`

> `forward()` - це **механізм передавання подій або ефектів далі по потоку даних**.
> Він пов'язує **джерело (**`from`**)** з **приймачем (**`to`**)**:
> коли щось сталося в `from`, Effector **автоматично викликає** `to` з тим самим payload.

Можна думати про це як про аналогію:

> "Коли ця подія сталася - виклич іншу".

---

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

```javascript
import { createEvent, forward } from 'effector'

const loginClicked = createEvent()
const startAuth = createEvent()

forward({
  from: loginClicked,
  to: startAuth,
})

loginClicked()
// => автоматично викличе startAuth()
```

Тут `loginClicked` просто "переадресовує" сигнал у `startAuth`.

---

## 3. Передавання даних (payload)

Якщо `from` передає аргумент, `to` його теж отримає:

```javascript
const userSelected = createEvent<{ id: number }>()
const loadUserFx = createEffect(async ({ id }) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
})

forward({
  from: userSelected,
  to: loadUserFx,
})

userSelected({ id: 42 })
// => автоматично викличе loadUserFx({ id: 42 })
```

Тобто payload повністю зберігається.

---

## 4. Можна пов'язувати не тільки події, а й ефекти

`from` і `to` можуть бути:

- `event`
- `effect`
- `store` (через `.updates`)
- масив із кількох джерел

Приклад із кількома джерелами:

```javascript
const startLogin = createEvent()
const startRegister = createEvent()
const authFx = createEffect(async (data) => api.auth(data))

forward({
  from: [startLogin, startRegister],
  to: authFx,
})
```

Тепер **будь-яка з подій** запустить `authFx`.

---

## 5. forward() ≠ sample()

Іноді їх плутають, але вони різні:

|  | **forward()** | **sample()** |
| --- | --- | --- |
| Сенс | просто "перенаправ" | "візьми snapshot із source при clock" |
| Змінює дані | ні | можна через `fn` |
| Є фільтр | ні | так, `filter` |
| Сценарій | зв'язування однотипних подій | зв'язування залежностей (наприклад, при сабміті форми) |

Якщо тобі потрібно просто "передати" подію → `forward`.
Якщо потрібно "семплювати" дані при цій події → `sample`.

---

## 6. Використовується для маршрутизації подій

Приклад - об'єднання кількох подій в одну:

```javascript
const clicked = createEvent()
const pressedEnter = createEvent()
const submitForm = createEvent()

forward({
  from: [clicked, pressedEnter],
  to: submitForm,
})
```

Тепер і клік, і натискання Enter викликають `submitForm`.

---

## 7. Можна спрямовувати результат ефекту

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

const userLoaded = createEvent<any>()

forward({
  from: fetchUserFx.doneData,
  to: userLoaded,
})
```

Тепер, коли `fetchUserFx` завершиться успішно - спрацює `userLoaded(result)`.

---

## 8. Особливості роботи

- `forward()` **одразу створює підписку** між потоками;
- не можна використовувати циклічні зв'язки (Effector відловить помилку);
- дані не змінюються, просто "пролітають далі";
- зручно використовувати для:
  - маршрутизації сигналів,
  - об'єднання подій,
  - перевикористання бізнес-логіки.

---

## 9. Візуально

```javascript
[from] ---> [to]

userSelected ---> loadUserFx
```

або, якщо кілька:

```javascript
[clicked] ─┐
           ├──> [submitForm]
[pressedEnter] ┘
```

---

## Підсумок

> `forward()` - це простий спосіб **спрямувати події, ефекти або їхні результати** з одного місця в інше.
> Він:
>
> - не трансформує дані,
> - не фільтрує,
> - просто "переадресовує" виклик, зберігаючи реактивність.

---

## Приклад для запам'ятовування

```javascript
forward({
  from: logoutClicked,
  to: clearSessionFx,
})
```

> "Коли користувач натиснув Logout - запусти ефект очищення сесії".

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

Для рев’юера

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

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