Що робить `createGate()`

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

Що таке `createGate()`

createGate() - це спеціальний інструмент із пакета effector-react, який зв'язує життєвий цикл React-компонента (mount/unmount) із реактивною моделлю Effector.

Простіше кажучи:

"Gate" (ворота) - це точка входу даних і стану компонента у світ Effector. Він дозволяє Effector знати, коли компонент змонтований, розмонтований і з якими props.

1. Приклад базового використання

javascript

import { createGate } from 'effector-react'

const UserGate = createGate<{ userId: number }>()

// десь у компоненті:
function UserPage({ userId }: { userId: number }) {
  // "відкриваємо ворота" - передаємо дані з React в Effector
  UserGate.useGate({ userId })

  return <div>Профіль користувача {userId}</div>
}

Коли компонент монтується -> Gate "відкривається" Коли розмонтовується -> Gate "закривається"

2. Що робить Gate під капотом

Кожен Gate створює декілька подій та store-об'єктів:

Елемент	Тип	Що робить
`Gate.open`	`Event<Props>`	викликається при монтуванні компонента
`Gate.close`	`Event<void>`	викликається при розмонтуванні
`Gate.status`	`Store<boolean>`	true = компонент змонтований
`Gate.state`	`Store<Props>`	зберігає поточні props, передані в `useGate()`

Таким чином, Gate - це реактивне представлення життєвого циклу React-компонента.

3. Приклад використання в реальному сценарії

javascript

import { createEffect, sample } from 'effector'
import { createGate } from 'effector-react'

const UserGate = createGate<{ id: number }>()

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

// коли компонент відкрився (змонтувався) -> запускаємо завантаження
sample({
  clock: UserGate.open,
  source: UserGate.state.map(({ id }) => id),
  target: fetchUserFx,
})

Тепер при монтуванні UserPage автоматично завантажиться користувач, а при розмонтуванні можна скасувати операції або очистити стан.

4. Gate для SSR

Gate ідеально підходить для SSR (Server-Side Rendering): він дозволяє описати, що потрібно завантажити на сервері, якщо цей компонент повинен бути відрендерений заздалегідь.

javascript

const PageGate = createGate()
sample({
  clock: PageGate.open,
  target: loadPageDataFx,
})

На сервері можна "відкрити ворота" вручну:

javascript

await allSettled(PageGate.open, { scope, params: { slug: 'home' } })

Це робить SSR передбачуваним і реактивним - жодного хаосу з useEffect().

5. Gate і вкладені компоненти

Якщо компонент A відкриває GateA, а всередині є компонент B з GateB - Effector відстежує їх незалежно: кожен gate працює у своїй "області життя".

Можна, наприклад, запускати завантаження даних, тільки якщо обидва Gate відкриті (через $GateA.status і $GateB.status).

6. Gate у поєднанні з `sample` і `guard`

Частий патерн:

javascript

import { createEvent, sample, guard } from 'effector'
import { createGate } from 'effector-react'

const ProductGate = createGate<{ id: string }>()
const loadProductFx = createEffect(api.getProduct)
const $isOnline = createStore(true)

guard({
  clock: ProductGate.open,
  filter: $isOnline,
  source: ProductGate.state.map(({ id }) => id),
  target: loadProductFx,
})

Тепер:

при монтуванні Product-компонента запускається завантаження,
але тільки якщо $isOnline === true.

7. Як `useGate()` працює всередині

Коли ти викликаєш:

javascript

UserGate.useGate({ userId: 123 })

Effector робить під капотом:

Gate.open({ userId: 123 })
Виставляє $status = true, $state = { userId: 123 }
Коли компонент розмонтовується:

викликає Gate.close()
$status = false

Таким чином, це обгортка-hook для зв'язування React і Effector.

8. Ключові переваги `Gate`

Перевага	Опис
Життєвий цикл	Дозволяє Effector знати, коли компонент існує
Зв'язок із props	Автоматично передає пропси у store
Data Loading	Можна запускати ефекти при монтуванні
Очищення	Можна скидати стан при закритті Gate
SSR-ready	Працює однаково в браузері і на сервері

9. Візуально

javascript

React Component <-> Gate <-> Effector Graph
        | open/close
        | props -> state

Gate - це "реактивні двері" між React і графом Effector.

10. ПІДСУМОК

createGate() - це "ворота" між React і Effector. Він дозволяє:

відстежувати монтування/розмонтування компонентів,

отримувати їхні props у реактивну модель,

автоматично запускати ефекти при відкритті,

скидати дані при закритті,

і керувати SSR-завантаженням без useEffect.

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

createGate() = "реактивний useEffect + useState, але в графі Effector".

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

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

Premium

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