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

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

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

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

Контент

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

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

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

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

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

### 1. Створюємо store

```javascript
// store.ts
import { create } from 'zustand'

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

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}))
```

---

### 2. Використовуємо store в компоненті

Сам store - це **React-хук**, який повертає доступ до стану і дій.

#### Приклад простого використання:

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

export function Counter() {
  const { count, increase, decrease } = useCounterStore() // <- виклик хука Zustand

return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  )
}
```

При цьому React-компонент автоматично **підписується** тільки на `count`, `increase` і `decrease`.
Коли ці значення змінюються, компонент **перемальовується**.

---

### 3. Дістаємо тільки потрібну частину стану (селектори)

Щоб компонент не оновлювався при зміні всього стану, можна вибрати тільки потрібні поля:

```javascript
const count = useCounterStore((state) => state.count)
const increase = useCounterStore((state) => state.increase)
```

або компактно:

```javascript
const { count, increase } = useCounterStore((state) => ({
  count: state.count,
  increase: state.increase,
}))
```

Так компонент буде **оновлюватися тільки при зміні конкретних полів**, а не всього стора.

---

### 4. Доступ до стану поза React-компонентами

Zustand також дозволяє працювати зі store **поза React** (наприклад, в утилітах чи API):

```javascript
// Отримати стан
console.log(useCounterStore.getState().count)

// Оновити стан
useCounterStore.setState({ count: 100 })
```

---

### Підсумок

| Сценарій | Як отримати стан |
|---|---|
| Усередині React-компонента | `const value = useStore((s) => s.value)` |
| Кілька полів | `const { a, b } = useStore((s) => ({ a: s.a, b: s.b }))` |
| Поза React | `useStore.getState()` / `useStore.setState()` |
| Підписка вручну | `useStore.subscribe(callback)` |

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

Для рев’юера

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

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