react-state-management
Реализация управления состоянием в React
Управление состоянием между компонентами React может приводить к сложному коду и непоследовательным данным. Этот навык предоставляет комплексные паттерны для Redux Toolkit, Zustand, Jotai и React Query для эффективного управления локальным, глобальным и серверным состоянием.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «react-state-management». What state management library should I use for a small app with simple global state needs?
Ожидаемый результат:
Для небольших приложений с простыми потребностями в глобальном состоянии, Zustand или Jotai являются отличным выбором:
**Zustand** предлагает простейший API с минимальным boilerplate:
- Создание хранилища с помощью одной hook-подобной функции
- Встроенные devtools и middleware для сохранения
- Провайдеры не требуются
- Выборочные подписки предотвращают ненужные повторные рендеры
**Jotai** превосходит, когда нужны атомарные, детальные обновления:
- Каждый кусок состояния - независимый атом
- Производные атомы автоматически вычисляются из других атомов
- Идеально для тонкой реактивности
Выберите Zustand, если предпочитаете единую модель хранилища. Выберите Jotai, если хотите атомарные обновления без обертки глобального хранилища.
Использование «react-state-management». How do I handle server state with React Query vs client state with Redux Toolkit?
Ожидаемый результат:
Держите серверное состояние и клиентское состояние отдельно для ясности и удобства поддержки:
**React Query управляет серверным состоянием:**
- Серверные данные, кэширование и синхронизация
- Автоматический повторный запрос и фоновые обновления
- Стратегия кэширования stale-while-revalidate
- Оптимистичные мутации с откатом
**Redux Toolkit управляет клиентским состоянием:**
- Состояние пользовательского интерфейса (модальные окна, открытие/закрытие боковой панели)
- Состояние аутентификации (когда не в cookies)
- Настройки и предпочтения приложения
- Сложное производное клиентское состояние
Это разделение предотвращает смешивание ответственности и упрощает отладку, так как каждый инструмент имеет четкое назначение.
Аудит безопасности
БезопасноAll 44 static findings are false positives. The scanner incorrectly flagged markdown code blocks as shell commands, standard documentation URLs as hardcoded secrets, and React/Redux patterns (state, slices, selectors) as cryptographic or reconnaissance patterns. This is legitimate documentation for React state management libraries.
Оценка качества
Что вы можете построить
Выбор решения для состояния в новом проекте
Команда разработчиков, начинающая новое React-приложение, needs to select the right state management approach based on app size and requirements.
Реализация кэширования серверных данных
Фронтенд-разработчик wants to add caching, background refetching, and optimistic updates for API data in a React application.
Миграция устаревшего Redux на современные паттерны
Разработчику нужно обновить многословный boilerplate-код Redux до Redux Toolkit с Immer для неизменяемых обновлений.
Попробуйте эти промпты
How do I set up Redux Toolkit with TypeScript in a React app? Show how to create a store with slices and typed useDispatch and useSelector hooks.
Show me how to create a Zustand store that persists to localStorage with devtools support. Include how to access the store in components and handle typed state updates.
Write a React Query mutation that performs optimistic updates. Include onMutate for snapshotting previous state, onError for rollback, and onSettled for refetching.
How do I combine React Query for server state with Zustand for client-only state in the same application? Show the separation of concerns and how components consume both.
Лучшие практики
- Располагайте состояние как можно ближе к месту его использования - избегайте помещения всего в глобальное состояние
- Используйте селекторы для выбора только необходимых данных из хранилищ, чтобы предотвратить ненужные повторные рендеры компонентов
- Разделяйте серверное состояние (React Query) от клиентского состояния (Zustand/Redux) - у каждого разные паттерны обновления и время жизни
Избегать
- Помещение каждого кусочка состояния в глобальное состояние только потому, что он используется несколькими компонентами - локальное состояние часто достаточно
- Прямое изменение состояния вместо использования паттернов неизменяемых обновлений или библиотек типа Immer
- Дублирование серверного состояния и в React Query, и в клиентских хранилищах - пусть React Query будет единственным источником правды для серверных данных