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

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

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 - запусти ефект очищення сесії".

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

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

Premium

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