zustand-store-ts
Создание типобезопасных хранилищ Zustand для React
Управление состоянием React с правильными типами TypeScript и промежуточным ПО является сложной задачей. Этот навык предоставляет проверенные шаблоны для создания поддерживаемых хранилищ Zustand с middleware subscribeWithSelector и чётким разделением состояния и действий.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «zustand-store-ts». Создайте хранилище счётчика с действиями increment, decrement и reset
Ожидаемый результат:
Интерфейс хранилища TypeScript с состоянием count и тремя методами действий, плюс реализация create() с обёрнутым middleware subscribeWithSelector вокруг определения хранилища.
Использование «zustand-store-ts». Как подписаться только на изменение userId?
Ожидаемый результат:
Используйте store.subscribe((state) => state.userId, (id) => console.log(id)) для получения обратных вызовов только при изменении userId, избегая ненужных выполнений для других обновлений состояния.
Аудит безопасности
БезопасноStatic analysis flagged 19 patterns (14 external_commands, 5 blocker/crypto), but all are false positives. The backticks detected are markdown code fence delimiters for TypeScript examples, not shell execution. The cryptographic warnings reference 'subscribeWithSelector' text patterns, not actual crypto algorithms. This is a documentation-only skill with code examples for Zustand state management.
Оценка качества
Что вы можете построить
React-разработчик, создающий глобальное состояние
Создание нового хранилища Zustand для управления состоянием всего приложения, такого как пользовательские сессии, темы или флаги функций, с полной поддержкой TypeScript.
Команда, стандартизирующая паттерны состояния
Установление согласованных паттернов хранилищ в кодовой базе с правильной типизацией, использованием промежуточного ПО и лучшими практиками подписки.
Миграция с Redux на Zustand
Конвертация существующих хранилищ Redux в легковесные хранилища Zustand с сохранением типов TypeScript и оптимизацией повторных рендеров.
Попробуйте эти промпты
Создайте шаблон хранилища Zustand для корзины покупок с массивом товаров и вычислением общей цены. Используйте TypeScript и включите промежуточное ПО subscribeWithSelector.
Сгенерируйте хранилище пользователя с асинхронными действиями входа и выхода. Включите правильные интерфейсы TypeScript для состояния и действий, с состояниями загрузки и ошибок.
Создайте хранилище управления проектами с задачами, фильтрами и вычисляемыми селекторами. Покажите, как использовать отдельные селекторы для предотвращения ненужных повторных рендеров.
Покажите, как подписываться на изменения хранилища вне React-компонентов для логирования или интеграции с внешними системами, такими как аналитика.
Лучшие практики
- Всегда оборачивайте хранилища с помощью промежуточного ПО subscribeWithSelector для гранулярных подписок
- Определяйте отдельные интерфейсы для состояния и действий, затем объединяйте их для типа хранилища
- Используйте функции селекторов в компонентах для подписки только на необходимые части состояния
Избегать
- Деструктуризация всего хранилища в компонентах вызывает повторные рендеры при любом изменении состояния
- Создание хранилищ без интерфейсов TypeScript приводит к потере преимуществ типобезопасности
- Подписка на весь объект состояния, когда нужен только один свойство