AIKraft/AI/Войти
AIKraft/Skills/redux toolkit

redux toolkit

Comprehensive Redux Toolkit best practices for React and Next.js applications with TypeScript.

mindrally official Разработка

Что делает навык

Навык предоставляет экспертные рекомендации по использованию Redux Toolkit для управления состоянием в приложениях React и Next.js с TypeScript. Он охватывает лучшие практики написания чистого, типобезопасного и масштабируемого кода, включая организацию слайсов, работу с асинхронными операциями и оптимизацию производительности.

Когда применять

  • Определение структуры слайков (createSlice) и нормализация состояния для предотвращения глубокой вложенности данных.
  • Настройка RTK Query для получения данных, кэширования и автоматической инвалидации кэша.
  • Реализация асинхронных операций с помощью createAsyncThunk с корректной обработкой ошибок.
  • Создание мемоизированных селекторов (createSelector) для инкапсуляции доступа к состоянию и вычисления производных данных.
  • Обеспечение строгой типизации через интерфейсы, typed hooks (useAppDispatch, useAppSelector) и строгий режим TypeScript.

Как работает

  1. Определить интерфейсы для состояния и пропсов, соблюдая соглашения об именовании (PascalCase для типов, camelCase для переменных).
  2. Создать слайк с помощью createSlice, объединив начальное состояние, редукторы и экшены в одном модуле.
  3. Настроить RTK Query или createAsyncThunk для обработки асинхронных запросов, включая обработку ошибок через rejectWithValue.
  4. Создать мемоизированные селекторы с помощью createSelector для безопасного доступа к данным и вычисления производных значений.
  5. Применить оптимизации производительности: React.memo, useCallback, useMemo и динамические импорты для разделения кода.
  6. Обеспечить покрытие тестами редукторов, селекторов и thunk-ов с использованием Jest и React Testing Library по паттерну Arrange-Act-Assert.

Примеры запросов агенту

Как правильно организовать Redux Toolkit слайк для управления состоянием пользователя с использованием TypeScript?
Настрой RTK Query для получения данных с сервера и автоматического кэширования в Next.js приложении.
Реализуй асинхронный thunk для загрузки данных с обработкой ошибок и возвратом значения через rejectWithValue.

Что понадобится

  • React и Next.js
  • TypeScript (включенный строгий режим)
  • Redux Toolkit (createSlice, createAsyncThunk, RTK Query)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «redux-toolkit» из репозитория: # https://github.com/mindrally/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r redux-toolkit/ ~/.claude/skills/redux-toolkit/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.