Доступ до стану
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) |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.