Zustand для лёгкого состояния React
Создавайте хранилище Zustand с помощью create(), читайте состояние хуком, обновляйте его действиями и пользуйтесь минимальным API без шаблонного кода.
«Zustand для лёгкого состояния React» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое Zustand
Zustand — минималистичная и быстрая библиотека управления состоянием для React. Весь набор API очень мал: создайте хранилище, используйте хук для чтения и обновления данных. Не нужны обработчики состояния, действия и шаблонный код.
Создание хранилища
create() определяет хранилище с состоянием и действиями в виде обычного объекта. Возвращаемое значение является хуком.
import { create } from 'zustand';
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));Чтение состояния хранилища
Вызовите хук с функцией-селектором, чтобы подписаться на определённые срезы состояния. Компонент повторно отрисовывается только при изменении выбранного среза.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Чтение действий
Выбирайте действия таким же образом. Действия не изменяются, поэтому их выбор не вызывает лишних повторных отрисовок.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}Обновление состояния с помощью set()
Функция set() неглубоко объединяет обновления (подобно setState в классовых компонентах React). Передавайте функцию для обновлений, зависящих от предыдущего состояния.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Асинхронные действия
Действия в Zustand могут быть асинхронными — просто вызовите set() после ожидания асинхронной операции.
export const useUsersStore = create<UsersStore>((set) => ({
users: [],
loading: false,
fetchUsers: async () => {
set({ loading: true });
const users = await fetch('/api/users').then(r => r.json());
set({ users, loading: false });
}
}));Срезы — составление крупных хранилищ
Разделите крупное хранилище на срезы (отдельные объекты) и объедините их. Подход Zustand не требует абстракции срезов, но это удобный способ организовать крупные хранилища.
Промежуточное ПО: persist
Промежуточное ПО persist сохраняет состояние Zustand в localStorage и восстанавливает его при загрузке — при минимальной настройке.
import { persist } from 'zustand/middleware';
export const useSettingsStore = create<Settings>(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme })
}),
{ name: 'app-settings' } // localStorage key
)
);Промежуточное ПО: devtools
Добавьте поддержку Redux DevTools в Zustand с помощью промежуточного ПО devtools. Вы получите полное журналирование действий и перемещение во времени.
Zustand и Redux Toolkit
Zustand: минималистичный, без шаблонного кода, быстро настраивается, отлично подходит для небольших и средних приложений. RTK: структурированный, масштабируемый, с лучшими в своём классе DevTools, лучше подходит для крупных команд. Оба варианта надёжны — для большинства приложений выигрывает простота Zustand.
Селекторы и производительность
Всегда выбирайте минимальный срез состояния, необходимый компоненту. Выбор всего объекта состояния вызывает повторную отрисовку при любом изменении хранилища. Используйте shallow из zustand/shallow для выбора нескольких свойств.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Быстрая проверка
Как создать хранилище Zustand, которым сможет пользоваться всё приложение React?
Итоги: Zustand
create() определяет состояние и действия. Возвращаемое значение является хуком. Выбирайте срезы, чтобы избежать ненужных повторных отрисовок. set() объединяет обновления состояния. Асинхронные действия вызывают set() после await. Промежуточное ПО persist предназначено для localStorage. devtools — для интеграции с Redux DevTools. Provider не нужен.
Часто задаваемые вопросы
Урок «Zustand для лёгкого состояния React» бесплатный?
Да — полный текст урока «Zustand для лёгкого состояния React» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Zustand для лёгкого состояния React»?
Создавайте хранилище Zustand с помощью create(), читайте состояние хуком, обновляйте его действиями и пользуйтесь минимальным API без шаблонного кода. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Zustand для лёгкого состояния React»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Redux Toolkit: createSlice и configureStore
- Zustand для лёгкого состояния React
- Pinia для Vue: defineStore и storeToRefs
- Когда использовать глобальное и локальное состояние