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

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

Що таке `split`

split() - це оператор, який розділяє один потік (event/effect) на кілька гілок залежно від умови (match) або ознаки (cases).

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

"Коли прийшла подія - відправ її у потрібну категорію залежно від вмісту."

1. Простий приклад

javascript

import { createEvent, split } from 'effector'

const userAction = createEvent<'login' | 'logout' | 'signup'>()

const { login, logout, signup } = split({
  source: userAction,
  match: {
    login: (type) => type === 'login',
    logout: (type) => type === 'logout',
    signup: (type) => type === 'signup',
  },
})

login.watch(() => console.log('Увійшов'))
logout.watch(() => console.log('Вийшов'))
signup.watch(() => console.log('Зареєструвався'))

userAction('signup') // → "Зареєструвався"
userAction('logout') // → "Вийшов"

Тут split() приймає одну подію (userAction) і створює три нові події (login, logout, signup), кожна з яких тригериться тільки при виконанні своєї умови.

2. Синтаксис

javascript

split({
  source,   // event або effect.doneData
  match,    // об'єкт з функціями-фільтрами
  cases?,   // об'єкт готових подій для призначення
})

3. Приклад з об'єктом даних

javascript

const formSubmitted = createEvent<{ type: 'login' | 'signup'; data: any }>()

const { login, signup } = split({
  source: formSubmitted,
  match: {
    login: ({ type }) => type === 'login',
    signup: ({ type }) => type === 'signup',
  },
})

login.watch(({ data }) => console.log('Логінимось:', data))
signup.watch(({ data }) => console.log('Реєструємо:', data))

formSubmitted({ type: 'signup', data: { name: 'Alex' } })
// → "Реєструємо: { name: 'Alex' }"

split просто "розкидає" вхідний payload у потрібну подію залежно від умови.

4. Приклад з ефектом

split чудово працює з ефектами, особливо з .done, .fail і .finally:

javascript

import { createEffect } from 'effector'

const fetchUserFx = createEffect(async (id: number) => {
  const res = await fetch(`/api/users/${id}`)
  if (!res.ok) throw new Error('Not found')
  return res.json()
})

const { success, failure } = split({
  source: fetchUserFx.finally,
  match: {
    success: ({ status }) => status === 'done',
    failure: ({ status }) => status === 'fail',
  },
})

success.watch(({ result }) => console.log('Користувач:', result))
failure.watch(({ error }) => console.error('Помилка:', error))

Це дуже поширений патерн: розділити успішний і неуспішний результат ефекту без ручних перевірок.

5. Використання із заздалегідь створеними подіями (`cases`)

Якщо події вже оголошені - можна просто "спрямувати" потоки:

javascript

const loginEvent = createEvent()
const signupEvent = createEvent()

split({
  source: userAction,
  match: {
    login: (t) => t === 'login',
    signup: (t) => t === 'signup',
  },
  cases: {
    login: loginEvent,
    signup: signupEvent,
  },
})

Тепер userAction('login') викличе loginEvent().

6. Що робить `split` під капотом

split() - це як кілька guard() підряд, але зі зручним декларативним синтаксисом і автогенерацією подій.

Еквівалентно цьому:

javascript

const login = guard({ source: userAction, filter: (t) => t === 'login' })
const logout = guard({ source: userAction, filter: (t) => t === 'logout' })

Але split() робить усе за тебе однією командою.

7. Можна додати "дефолтний" маршрут

Якщо жодна умова не підійшла - спрацює __ (підкреслення):

javascript

const action = createEvent<string>()

const { ok, fail, __: unknown } = split({
  source: action,
  match: {
    ok: (v) => v === 'ok',
    fail: (v) => v === 'fail',
  },
})

unknown.watch(() => console.warn('Невідома дія'))
action('cancel') // → "Невідома дія"

8. Типізація split у TypeScript

Effector розумно виводить типи для всіх гілок:

javascript

const action = createEvent<'a' | 'b' | 'c'>()

const { a, b, c } = split({
  source: action,
  match: {
    a: (x): x is 'a' => x === 'a',
    b: (x): x is 'b' => x === 'b',
    c: (x): x is 'c',
  },
})

Тепер a, b, c мають строго типізований payload - TypeScript знає, що a може бути тільки 'a'.

9. Візуально

javascript

          [source event]
                 │
     ┌───────────┼────────────┐
     ▼           ▼            ▼
 [caseA]     [caseB]       [caseC]

Кожна умова створює свою "гілку потоку".

10. Практичні сценарії

Сценарій	Що робить split
Обробка різних типів дій	Розділяє "login", "signup", "logout"
Розділення результатів ефекту	success / failure
Фільтрація за статусом даних	active / archived / deleted
Розгалуження бізнес-логіки	залежно від типу користувача

Підсумок

split() - це реактивний "switch-case" в Effector. Він:

приймає один потік (source),

перевіряє кожен match,

створює (або спрямовує в) нові події,

відправляє payload у потрібну гілку.

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

split({ source, match: { A, B, C } }) ⇒ створює A(), B(), C() ⇒ викликає відповідне при виконанні умови.

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

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

Premium

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