Як взаємодіють store, actions і reducers?

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

1. Що таке ці три частини

Елемент	Що робить	Аналогія
Store	Зберігає весь стан застосунку і керує ним	"єдине сховище даних"
Action	Описує, що сталося	"повідомлення про подію"
Reducer	Описує, як стан має змінитися у відповідь на дію	"логіка оновлення"

2. Ланцюжок взаємодії (головний цикл Redux)

javascript

[Користувач або подія]
      ↓
  dispatch(action)
      ↓
     Reducer
      ↓
    Новий state
      ↓
     Store
      ↓
   Оновлення UI

3. Покроково

1. Store створюється за допомогою reducer'а

javascript

import { createStore } from 'redux'

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

const store = createStore(counterReducer)

store тепер:

зберігає поточний стан,
може приймати actions через dispatch(),
може повідомляти підписників через subscribe().

2. Action описує, що сталося

javascript

const action = { type: 'INCREMENT' }

Це просто об'єкт з полем type (і іноді payload - даними).

3. Action надсилається через dispatch

javascript

store.dispatch(action)

→ store отримує дію і передає її в reducer.

4. Reducer отримує state і action

javascript

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

→ Reducer обчислює новий стан, не мутуючи старий.

5. Store зберігає новий стан

Redux викликає reducer → отримує newState → замінює старий стан на новий всередині store.

javascript

store.subscribe(() => {
  console.log('State змінився:', store.getState())
})

→ Кожного разу після dispatch() викликаються всі слухачі, і React-компоненти (через useSelector) автоматично перемальовуються.

4. Візуально

javascript

          ┌──────────────┐
          │   COMPONENT  │
          │ (UI, React)  │
          └──────┬───────┘
                 │ dispatch(action)
                 ▼
          ┌──────────────┐
          │    STORE     │
          ├──────────────┤
          │ зберігає state│
          │ викликає      │
          │ reducer()     │
          └──────┬───────┘
                 │
                 ▼
          ┌──────────────┐
          │   REDUCER    │
          │ (чиста ф-я)  │
          └──────┬───────┘
                 │ повертає newState
                 ▼
          ┌──────────────┐
          │   STORE      │
          │ зберігає      │
          │ нове state    │
          └──────┬───────┘
                 │ повідомляє
                 ▼
          ┌──────────────┐
          │ COMPONENT(UI)│
          │ отримує новий state │
          └──────────────┘

5. Коротко

Крок	Що відбувається
1	Компонент викликає `dispatch(action)`
2	Store передає action у reducer
3	Reducer повертає новий стан
4	Store оновлює state
5	Підписники (`subscribe()` або React-компоненти) повідомляються і перемальовуються

6. У React (через react-redux)

У React все те саме, лише обгорнуто хуками:

javascript

const count = useSelector(state => state.count)
const dispatch = useDispatch()

<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>

React сам підписується на store і оновлює UI при змінах.

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

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

Premium

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