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

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

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

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

Контент

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

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

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

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

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

## Що таке `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',
  },
})

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()`
> ⇒ викликає відповідне при виконанні умови.

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

Для рев’юера

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

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