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

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

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

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

Контент

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

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

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

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

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

## Визначення

`store.subscribe(listener)` - це метод Redux-сховища (**store**),
який дозволяє **підписатися на зміни стану**.

> Тобто: щоразу, коли стан (`state`) змінюється, викликається ваша функція-слухач (`listener`).

---

## Простими словами

> `subscribe()` дозволяє "стежити" за змінами стану в store.
> Коли хтось викликав `dispatch()`, і reducer повернув новий стан - усі підписники отримують сповіщення.

---

## Приклад

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

// Reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 }
    default:
      return state
  }
}

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

// Підписуємося на оновлення
const unsubscribe = store.subscribe(() => {
  console.log('State змінився:', store.getState())
})

// Відправляємо action
store.dispatch({ type: 'INCREMENT' })
// -> "State змінився: { count: 1 }"

// Відписуємося, якщо більше не потрібно стежити
unsubscribe()
```

---

## Як це працює

1. Ти викликаєш `store.subscribe(listener)`
-> Redux додає цю функцію до списку підписників.
2. Щоразу при `dispatch()` (коли `state` дійсно змінився)
-> Redux викликає всіх слухачів.
3. Всередині слухача можна:
  - викликати `store.getState()` і прочитати новий стан,
  - оновити інтерфейс вручну (якщо не використовується React),
  - або запустити якусь побічну логіку.

---

## Значення, що повертається

`subscribe()` повертає **функцію для відписки**:

```javascript
const unsubscribe = store.subscribe(listener)
unsubscribe() // припиняє стеження за змінами
```

---

## У React це відбувається автоматично

Якщо ти використовуєш React з Redux (через `react-redux` і `Provider`),
то `subscribe()` використовується **всередині** `connect()` **або** `useSelector()`.

> Тому компоненти React автоматично перемальовуються,
> коли дані зі store, за якими вони "стежать", змінюються.

Ти не викликаєш `subscribe()` вручну - за це відповідає бібліотека.

---

## Підсумок

| Метод | Що робить |
|---|---|
| `dispatch(action)` | Відправляє дію -> запускає reducer -> оновлює state |
| `getState()` | Повертає поточний стан store |
| `subscribe(listener)` | Підписує функцію на оновлення стану |
| Повернення з `subscribe()` | Функція для **відписки** |

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

Для рев’юера

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

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