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

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

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

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

Контент

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

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

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

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

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

## Проблема, яку вирішує combineReducers

У реальному застосунку стан (state) зазвичай **розділений на частини**:
наприклад, `user`, `todos`, `cart`, `settings` тощо.

Кожна частина керується **своїм reducer'ом**.
Але `createStore()` приймає тільки **один reducer**.

Рішення: `combineReducers()` об'єднує всі редюсери в один "головний".

---

## Приклад

```javascript
import { combineReducers, createStore } from 'redux'

// Reducer для задач
function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload]
    default:
      return state
  }
}

// Reducer для користувача
function userReducer(state = { name: '' }, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, name: action.payload }
    default:
      return state
  }
}

// Об'єднуємо редюсери
const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer,
})

// Створюємо store
const store = createStore(rootReducer)
```

---

## Як це працює всередині

`combineReducers()` створює **один спільний reducer**, який:

1. викликає кожен під-reducer;
2. передає йому **тільки відповідну частину стану**;
3. збирає все назад в **єдиний об'єкт state**.

Тобто всередині відбувається щось на кшталт:

```javascript
function rootReducer(state = {}, action) {
  return {
    todos: todosReducer(state.todos, action),
    user: userReducer(state.user, action)
  }
}
```

---

## Візуально

```javascript
┌────────────────────────────┐
│          store             │
│  {                         │
│    todos: [...],           │
│    user: { name: 'Tim' }   │
│  }                         │
└────────────────────────────┘
          ▲
          │
          │ combineReducers
          │
 ┌────────┴─────────┐
 │                  │
 ▼                  ▼
todosReducer     userReducer
```

---

## Переваги

Ділить код на незалежні модулі (кожен reducer відповідає за свій "шматок").
Спрощує тестування і підтримку.
Забезпечує структурований стан (state tree).

---

## Як потім звертатися до state

Після `combineReducers()` стан виглядає ось так:

```javascript
store.getState()
// { todos: [...], user: { name: 'Tim' } }
```

Відповідно, щоб дістати ім'я користувача:

```javascript
const name = store.getState().user.name
```

---

## Підсумок

| Функція | Що робить |
|---|---|
| `combineReducers(reducers)` | Об'єднує кілька reducer'ів в один |
| **Вхід** | Об'єкт вигляду `{ key: reducer }` |
| **Вихід** | Єдиний "головний" reducer |
| **Навіщо потрібно** | Щоб розбити логіку по незалежних модулях стану |

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

Для рев’юера

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

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