Що таке "store" у контексті Zustand?

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

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

Дані (state) - поточний стан застосунку;
Дії (actions) - функції, які змінюють цей стан;
Механізм підписки - систему, що дозволяє компонентам 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	Розширення для функціональності

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

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

Premium

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

Що таке "store" у контексті Zustand?

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

#Приклад store у Zustand

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

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

#Підсумок