Шаблоны типизации хранилищ Zustand
Определяйте типизированные хранилища Zustand с интерфейсами и действиями
«Шаблоны типизации хранилищ Zustand» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.
Зачем типизировать Zustand
Zustand — минималистичная библиотека управления состоянием. При правильной интеграции с TypeScript Вы получаете типобезопасное чтение хранилища, действия и селекторы без лишнего шаблонного кода.
import { create } from "zustand";Базовое типизированное хранилище
Определите интерфейс хранилища и передайте его как обобщённый параметр в create.
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
}
const useCounter = create<CounterStore>((set) => ({
count: 0,
increment: () => set((s) => ({ count: s.count + 1 })),
decrement: () => set((s) => ({ count: s.count - 1 })),
}));Чтение состояния хранилища
Используйте хук с селектором, чтобы читать отдельные части состояния. TypeScript выводит тип возвращаемого значения из селектора.
function Counter() {
const count = useCounter((s) => s.count); // number
const increment = useCounter((s) => s.increment); // () => void
return <button onClick={increment}>{count}</button>;
}Разделение состояния и действий
Распространённый шаблон отделяет свойства состояния от методов действий в интерфейсе для более ясной организации.
interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;Асинхронные действия в Zustand
Zustand изначально поддерживает асинхронные действия — просто сделайте функцию действия асинхронной внутри функции-создателя.
interface UserStore {
users: User[];
fetchUsers: () => Promise<void>;
}
const useUserStore = create<UserStore>((set) => ({
users: [],
fetchUsers: async () => {
const data = await api.getUsers();
set({ users: data });
},
}));Типизация посредника immer
Используйте посредник immer в Zustand для обновлений в изменяемом стиле. Тип хранилища корректно передаётся через всю цепочку.
import { immer } from "zustand/middleware/immer";
const useStore = create<CounterStore>()(
immer((set) => ({
count: 0,
increment: () => set((state) => { state.count++; }),
}))
);Посредник devtools
Объедините devtools с правильной типизацией, чтобы включить поддержку Redux DevTools и сохранить целостность типов.
import { devtools } from "zustand/middleware";
const useStore = create<CounterStore>()(
devtools(
(set) => ({ count: 0, increment: () => set({ count: 1 }) }),
{ name: "CounterStore" }
)
);Типизация сохраняемого хранилища
Посредник persist сериализует состояние в localStorage. Типизируйте его правильно с помощью интерфейса частичного состояния.
import { persist } from "zustand/middleware";
const useStore = create<CounterStore>()(
persist(
(set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
{ name: "counter-storage" }
)
);Шаблон типизированных срезов
Для больших хранилищ разделяйте состояние на типизированные срезы, объединяемые в одном вызове create.
type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;Подписка за пределами React
Получайте доступ к состоянию хранилища и подписывайтесь на изменения за пределами компонентов React с помощью API типизированного хранилища.
// Access current state outside React
const count = useCounter.getState().count;
// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));Итоги: типизация Zustand
Типизация Zustand: определите интерфейс хранилища, передайте его в create, используйте селекторы для типизированного чтения состояния и подключайте посредники (immer, devtools, persist) через каррированный шаблон для правильной передачи типов.
Быстрая проверка
Как прочитать отдельную часть состояния Zustand в компоненте, не вызывая повторных отображений при несвязанных изменениях?
Чему Вы научились
Хранилища Zustand типизируются передачей обобщённого интерфейса в create. Используйте функции-селекторы для эффективного и типобезопасного чтения состояния. Объединяйте такие посредники, как immer, devtools и persist, через каррированный шаблон Zustand для правильного вывода типов TypeScript.
Часто задаваемые вопросы
Урок «Шаблоны типизации хранилищ Zustand» бесплатный?
Да — полный текст урока «Шаблоны типизации хранилищ Zustand» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Шаблоны типизации хранилищ Zustand»?
Определяйте типизированные хранилища Zustand с интерфейсами и действиями Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Шаблоны типизации хранилищ Zustand»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Типизация срезов и асинхронных действий Redux Toolkit
- Шаблоны типизации хранилищ Zustand
- XState: типизированные конечные автоматы
- Производное состояние и селекторы с типами