1. Настройка Redux Store, типизация хуков и интеграция с React на TypeScript
Настройка Redux Store, типизация хуков и интеграция с React на TypeScript
Добро пожаловать в курс Redux Toolkit и RTK Query: От основ до PRO на TypeScript. Это первая статья нашего цикла, в которой мы заложим фундамент для всех будущих приложений. Мы не просто настроим Redux, мы сделаем это правильно: с полной типизацией, использованием современных хуков и интеграцией в React-приложение.
Redux Toolkit (RTK) — это официальный, рекомендованный способ написания логики Redux. Он решает множество проблем «старого» Redux: убирает необходимость в огромном количестве шаблонного кода (boilerplate), упрощает настройку хранилища и делает работу с TypeScript интуитивно понятной.
Установка зависимостей
Прежде чем писать код, нам нужно установить необходимые пакеты. Мы предполагаем, что у вас уже развернут React-проект на TypeScript (например, через Vite или Create React App).
Выполните следующую команду в терминале:
Здесь:
* @reduxjs/toolkit — основная библиотека, включающая методы для создания слайсов, стора и RTK Query.
* react-redux — библиотека для связывания Redux с компонентами React.
Архитектура Redux Toolkit
В современном Redux мы оперируем понятием Slice (срез). Слайс — это коллекция логики редюсера и действий (actions) для одной конкретной функции вашего приложения (например, авторизация, корзина товаров или счетчик).
!Архитектура взаимодействия React компонентов и Redux Store через Слайсы
Шаг 1: Создание Слайса (Slice)
Создадим простую функциональность счетчика, чтобы продемонстрировать типизацию. Создайте файл src/store/features/counter/counterSlice.ts.
Обратите внимание на PayloadAction<number>. Это дженерик-тип, который гарантирует, что в action.payload придет именно число, а не строка или объект. Это и есть сила TypeScript.
Шаг 2: Настройка Store
Теперь создадим само хранилище. Создайте файл src/store/store.ts.
Функция configureStore автоматически настраивает инструменты разработчика (Redux DevTools) и добавляет полезные middleware (например, для проверки на случайные мутации).
Ключевой момент здесь — экспорт типов RootState и AppDispatch. Мы не пишем их вручную, мы просим TypeScript вывести их на основе созданного объекта store. Это гарантирует, что типы всегда будут актуальны при изменении редюсеров.
Шаг 3: Типизация хуков
В обычном JavaScript мы бы использовали useDispatch и useSelector напрямую из библиотеки react-redux. Однако в TypeScript это неудобно: useSelector не знает структуру нашего стейта, а useDispatch не знает о thunk-экшенах.
Лучшая практика — создать типизированные версии этих хуков. Создайте файл src/store/hooks.ts.
Теперь, когда вы будете использовать useAppSelector, TypeScript будет подсказывать вам поля вашего состояния (например, state.counter.value).
Шаг 4: Провайдер Store
Чтобы React увидел Redux, нужно обернуть приложение в компонент Provider. Обычно это делается в корневом файле, например main.tsx или index.tsx.
Интеграция в компонент
Теперь соберем всё вместе. Создадим компонент, который использует наши типизированные хуки и стилизован с помощью Tailwind CSS.
Разбор кода компонента
useAppSelector: Мы передаем функцию (state) => state.counter.value. Благодаря типизации, IDE знает, что у state есть поле counter, а у него — поле value. Если вы ошибетесь в названии, TypeScript немедленно подсветит ошибку.useAppDispatch: Возвращает функцию dispatch, которая принимает только валидные экшены. Если вы попробуете отправить incrementByAmount('пять') (строку вместо числа), TypeScript укажет на несоответствие типа PayloadAction<number>.Почему это важно?
Использование Redux Toolkit в связке с TypeScript дает нам:
* Безопасность: Вы не можете обратиться к несуществующему полю стейта. * Скорость разработки: Автодополнение кода работает великолепно. * Читаемость: Структура кода становится стандартизированной и понятной любому разработчику, знакомому с RTK.
В следующей статье мы углубимся в работу с асинхронными данными и рассмотрим, как RTK Query меняет правила игры при работе с API.