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

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

Допрацюйте відповідь до «Як взаємодіють store, actions і reducers?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## 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`.

---

### 6. Підписники повідомляються (`subscribe()`)

```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 при змінах.

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

Для рев’юера

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

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