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

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

Визначення

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()

Як це працює

Ти викликаєш store.subscribe(listener) -> Redux додає цю функцію до списку підписників.
Щоразу при dispatch() (коли state дійсно змінився) -> Redux викликає всіх слухачів.
Всередині слухача можна:

викликати 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()`	Функція для відписки

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

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

Premium

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

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

#Визначення

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

#Приклад

#Як це працює

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

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

#Підсумок