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

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

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

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

Контент

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

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

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

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

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

У контексті **Zustand**, **store** - це **централізоване сховище стану** (state store), яке містить:

1. **Дані (state)** - поточний стан застосунку;
2. **Дії (actions)** - функції, які змінюють цей стан;
3. **Механізм підписки** - систему, що дозволяє компонентам React автоматично оновлюватися, коли потрібна частина стану змінилася.

---

### Просте визначення

> **Store** - це об'єкт (або, точніше, функція-хук), який керує станом і надає доступ до нього з будь-якої частини застосунку.

---

### Приклад store у Zustand

```javascript
import { create } from 'zustand'

interface CounterState {
  count: number
  increase: () => void
  decrease: () => void
}

// Створюємо store
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}))
```

Що тут відбувається:

- `create()` - створює store.
- Всередину передається функція, яка отримує `set` - спосіб оновити стан.
- Повертаємо об'єкт, де є поля (state) і функції (actions).
- `useCounterStore` - це **React-хук**, який можна викликати в будь-якому компоненті, щоб отримати доступ до стану.

---

### Як store працює "під капотом"

Zustand створює **одне глобальне сховище** (не залежне від React), і хук `useStore()` просто:

- підписує компонент на потрібні дані;
- при їх зміні викликає ререндер тільки для цього компонента.

Це робить Zustand:

- дуже швидким (без Context API);
- простим для використання поза React (в plain JS);
- зручним для SSR і unit-тестів.

---

### Доступ до store поза React

Store Zustand - це не просто React-хук.
Він також містить методи `.getState()` і `.setState()` для прямої роботи:

```javascript
import { useCounterStore } from './store'

// Отримати стан поза React
console.log(useCounterStore.getState().count)

// Змінити стан поза React
useCounterStore.setState({ count: 10 })
```

Це зручно, наприклад, в:

- обробниках API;
- сервісах, не залежних від React;
- тестах і middleware.

---

### Підсумок

| Елемент store | Що це |
|---|---|
| **state** | Поточний стан даних |
| **actions** | Функції для зміни стану |
| **subscribe** | Механізм повідомлення компонентів |
| **getState / setState** | Імперативний доступ до стану |
| **persist / devtools / middleware** | Розширення для функціональності |

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

Для рев’юера

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

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