Урок 4: Знакомство с Redux Toolkit (установка и настройка)

Сегодня мы перевернём страницу и познакомимся с инструментом, который превращает Redux из громоздкого фреймворка в отличное решение. Добро пожаловать на Урок 4.

Классический «голый» Redux, который мы рассматривали в прошлых уроках, это как сборка мебели по инструкции с двадцатью страницами текста. Ты тратишь кучу времени на написание шаблонного кода: объявление констант для типов экшенов, создание функций-создателей экшенов (action creators), иммутабельное обновление состояния в редьюсерах… Это познавательно, но в реальном проекте такая рутина быстро утомляет и увеличивает шанс сделать ошибку, например, случайно изменить существующий объект состояния.

Именно для решения этих проблем команда Redux создала Redux Toolkit (RTK). Это не просто «еще одна библиотека». Это официальный, рекомендованный набор инструментов для эффективной разработки логики на Redux. Сами создатели Redux говорят: «Хочешь писать на Redux, то используй RTK». Он включает в себя утилиты, которые упрощают большинство стандартных сценариев использования Redux и встроенные настройки по умолчанию, которые помогают писать код в соответствии с лучшими практиками.

Представь, что RTK это твой личный ассистент по Redux. Он берёт на себя всю рутинную работу, позволяя тебе сосредоточиться на самой логике твоего приложения. Если раньше тебе приходилось вручную собирать конструктор, то теперь ты получаешь готовые блоки, которые просто нужно правильно соединить.

Ключевые преимущества Redux Toolkit

Давай разберёмся, что конкретно делает RTK таким особенным и почему он стал де-факто стандартом для новых проектов.

1. Меньше шаблонного кода. Это главный козырь. RTK радикально сокращает количество кода, которое тебе нужно писать. Больше не нужно объявлять константы для типов экшенов, писать функции-создатели экшенов вручную или создавать огромные операторы switch в редьюсерах. Одна короткая функция createSlice автоматически генерирует и экшены и редьюсеры на основе твоих настроек. Ты описываешь, «что должно произойти» в редьюсере, а RTK сам создаёт всё остальное.
2. Встроенные лучшие практики. RTK не просто сокращает код, он заставляет тебя писать его правильно. Одна из встроенных возможностей, это Immer. Immer это библиотека, которая позволяет тебе писать код, который выглядит как мутирующий (например, state.value += 1), но под капотом она создаёт корректное, иммутабельное обновление. Помнишь, в прошлом уроке мы мучились с ...spread операторами и map/filter, чтобы не изменить старое состояние? С Immer ты можешь просто «изменить» его, а Immer позаботится о создании неизменяемой копии. Это огромное облегчение для разработчика!
3. Простая настройка Store. Классический Redux требовал подключения множества промежуточных слоёв (middleware) вручную, например, redux-thunk для асинхронных операций. RTK по умолчанию подключает redux-thunk и включает поддержку Redux DevTools Extension. Всё, что тебе нужно, это вызвать одну функцию configureStore() и твой стор будет готов к бою с правильными настройками «из коробки».
4. Прикольные инструменты для сложных сценариев. RTK предоставляет такие инструменты, как createAsyncThunk для простой обработки асинхронных запросов (мы детально разберём это позже) и RTK Query. Полное решение для работы с API, которое может вообще избавить тебя от написания редьюсеров и экшенов для кэширования данных.

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

Установка необходимых пакетов: @reduxjs/toolkit и react-redux

Прежде чем мы окунёмся в код, нам нужно установить необходимые библиотеки. Нам понадобятся два основных пакета.

• @reduxjs/toolkit. Это ядро. Сам набор инструментов, который содержит все функции, о которых мы говорили: createSlice, configureStore, createAsyncThunk и другие.

• react-redux. Это официальная библиотека для связывания Redux с React. Она предоставляет нам хуки, такие как useSelector и useDispatch, которые позволяют нашим React-компонентам взаимодействовать с Redux-стором.

Раньше нужно было устанавливать кучу пакетов по отдельности (redux, redux-thunk и т.д.), но теперь @reduxjs/toolkit уже включает в себя всё необходимое. react-redux устанавливается отдельно, так как он отвечает именно за интеграцию с UI-фреймворком.

Открой свой терминал и давай установим их. Но сначала нам нужно создать проект, в котором мы будем работать.

Создание нового React-проекта с помощью Vite

Хотя можно использовать и Create React App (CRA), я настоятельно рекомендую Vite. Это современный, невероятно быстрый инструмент для сборки фронтенд-проектов. Он обеспечивает молниеносный запуск сервера для разработки и горячее обновление модулей (HMR).

Чтобы создать новый проект на Vite, выполни в терминале следующую команду:

npm create vite@latest my-redux-app -- --template react

Давай разберём её:

• npm create vite@latest это команда для создания нового проекта с использованием последней версии Vite.

• my-redux-app это название твоего проекта и папки, которая будет создана. Ты можешь назвать её как угодно.

• -- --template react указывает Vite использовать шаблон для React. Двойное -- нужно для передачи аргументов команде create.

После того как команда выполнится, перейди в созданную папку проекта, установи стандартные зависимости и запусти сервер разработки:

cd my-redux-app
npm install
npm run dev

Ты увидишь в терминале локальный адрес (обычно http://localhost:5173). Перейди по нему и ты увидишь стартовую страницу Vite + React. Поздравляю, твой проект готов.

Теперь, не закрывая сервер разработки, открой новое окно терминала в той же папке проекта. Здесь мы установим Redux Toolkit и React-Redux.

Установка зависимостей для Redux

В новом окне терминала, находясь в папке проекта my-redux-app, выполни следующую команду:

npm install @reduxjs/toolkit react-redux

Эта команда скачает и добавит обе библиотеки в твой проект. Теперь всё готово для того, чтобы начать писать настоящий, современный Redux-код с помощью RTK.

В процессе установки ты можешь заметить, что Vite работает очень быстро. Это одно из его главных преимуществ. Все зависимости установлены и наш проект готов к интеграции с Redux Toolkit.

Подготовка проекта к работе с Redux Toolkit

На этом этапе наша цель, не написать логику, а подготовить «чистое поле» для будущей работы.

Задача 1: Создай проект и установи зависимости

1. Открой терминал и выполни команду для создания нового React-проекта на Vite с названием rtk-practice-app.

2. Перейди в папку проекта, установи базовые зависимости и запусти сервер разработки, чтобы убедиться, что всё работает.

3. В отдельном окне терминала установи пакеты @reduxjs/toolkit и react-redux.

Задача 2: Изучи структуру проекта

1. Открой папку rtk-practice-app в твоём любимом редакторе кода (я очень рекомендую VS Code).

2. Обрати внимание на структуру файлов. Нас в первую очередь интересует папка src, где мы будем проводить большую часть времени.

3. Пока что мы не будем трогать существующие файлы. В следующем уроке мы начнём преобразовывать это приложение.

На этом уроке нам не нужно писать какой-либо значимый код на Redux. Наша задача сейчас подготовить окружение. Однако, чтобы ты не ушёл с пустыми руками, вот пример того, как будет выглядеть команда установки в файле package.json после нашего действия. Ты сможешь найти там примерно такие строки в разделе dependencies:

{
  "name": "rtk-practice-app",
  "dependencies": {
    "@reduxjs/toolkit": "^2.10.1",
    "react-redux": "^9.2.0",
    // ... другие зависимости
  }
}

Это подтверждение, что всё установилось корректно.

Итак, мы проделали подготовительную работу. Мы поняли, что Redux Toolkit это не опциональная библиотека, а официальный и единственно верный способ писать Redux в 2026 году и далее. Мы разобрали его ключевые преимущества, борьба с шаблонным кодом, встроенный Immer для простых иммутабельных обновлений и умные настройки по умолчанию.

Мы создали современный React-проект с помощью Vite и установили два ключевых пакета, @reduxjs/toolkit и react-redux. Проект готов и в следующем уроке мы возьмём наш громоздкий редьюсер из «голого» Redux и перепишем его с помощью функции createSlice, получив в десятки раз более лаконичный код.

Не пропусти следующий урок, где мы наконец-то начнём кодить с RTK.

Полный курс с уроками по Redux и Redux Toolkit для начинающих