Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Перейдем к Redux Toolkit и соберем простое приложение с несколькими кнопками - они будут менять значение счетчика. На этом примере мы увидим основные концепции Redux Toolkit. Для интеграции нам понадобятся два пакета:

2 <ul><li>Пакетreact-redux</li>

3 <li>Сам Redux Toolkit из пакета@reduxjs/toolkit</li>

4 </ul>Перейдем к установке:

5 Изучим структуру директорий, от которой будем отталкиваться. Это самый простой вариант, но не единственный возможный:

6 Для работы с Toolkit мы выделили директориюslicesс двумя файлами внутри -index.jsиcounterSlice.js.

7 В файлеindex.jsмы будем инициализировать хранилище и объединять все редьюсеры. Сами редьюсеры разбиваются по отдельным файлам -слайсамилисрезам. Каждый слайс отвечает за определенную сущность в приложении. Например, в приложении со списком товаров и покупателей можно выделить два слайса: один для товаров, другой для покупателей.

8 Такой подход разделяет общее состояние на отдельные модули со своей зоной ответственности. В нашем примере в состоянии находится счетчик, поэтому мы определили для него слайсcounterSlice.js. Теперь создаем редьюсер в слайсе для счетчика:

9 Чтобы создать редьюсер, создаем начальное значение initialState и вызываем createSlice(), который выполняет всю работу. Эта функция принимает объект, в котором нам важны три свойства:

10 <ul><li>name задает имя слайса</li>

11 <li>initialState задает начальное состояние</li>

12 <li>reducers принимает объект, в котором каждое свойство содержит редьюсеры. С их помощью мы будем менять состояние</li>

13 </ul>Вызов createSlice() вернет готовый слайс - это объект, в котором нам важны два свойства:

14 <ul><li>actions - это действия, с помощью которых мы запускаем созданные редьюсеры. Названия действий совпадают с ключами, которые мы указали в reducers при создании слайса. Toolkit автоматически создаст нужные действия и даст строковые имена их типам.

15 В примере выше мы экспортируем объект с действиями, которые получили из этого свойства. Дальше можно импортировать действия в компонентах, чтобы вызывать их.

16 </li>

17 <li>reducer - это готовый редьюсер, который мы будем подключать в хранилище. В примере выше он экспортируется по умолчанию просто для удобства, чтобы разграничить экспорт экшенов и редьюсера.

18 </li>

19 </ul>Теперь редьюсер готов к использованию. Сначала подключим его в общее хранилище. Для этого передаем редьюсер в функцию configureStore().

20 Эта функция умеет комбинировать редьюсеры самостоятельно, в отличие от такой же функции в Redux. Функция configureStore() принимает на вход объект с ключом reducer, значением которого становится объект с редьюсерами. У общего состояния state ключи будут такими же, как у этого объекта. Более подробно мы это разберем чуть позже. Создание хранилища выглядит так:

21 Здесь мы вызываем функцию configureStore() и передаем в нее объект со свойством reducer. А вот уже в reducer мы указываем объект с нашими редьюсерами. В нашем примере есть единственный редьюсер counterReducer, который мы импортируем по умолчанию изcounterSlice.js.

22 Если бы у нас было несколько слайсов, можно было бы указать их под разными ключами. Это выглядело бы так:

23 Выше мы видим два редьюсера, которые передаются под ключами users и tasks. Мы можем придумывать любые имена ключей, но лучше, когда имена соответствуют содержимому. Например, редьюсер для списка пользователей лучше назвать users, а для списка задач - tasks.

24 Теперь наше хранилище готово к использованию. Можно подключить его в приложение.

25 Начнем создавать приложение с верхнего уровня. Здесь понадобится компонент <Provider>, который содержит хранилище и прокидывает его вглубь дерева компонентов через контекст:

26 Теперь самое главное - Toolkit в действии. Здесь мы опираемся на работу хуков. Здесь все работает по-прежнему:

27 <ul><li>Чтобы изменить состояние в хранилище, передаем действие в функцию dispatch()</li>

28 <li>Чтобы получить объект dispatch в компоненте, используем функцию useDispatch()</li>

29 <li>Чтобы извлечь данные из стора, используем хук useSelector(). Он принимает функцию, в которую все состояние передается через параметр. Возвращаемое значение из этой функции станет результатом выполнения useSelector()</li>

30 </ul>Посмотрим, как это работает:

31 В компоненте может быть несколько вызовов useSelector, причем каждый вызов создаст подписку на изменение состояния. Срабатывание нескольких подписок одновременно приведет только к одной перерисовке компонента.

32 Обратите внимание, что переданная в useSelector функция принимает все состояние целиком. Если у нас несколько редьюсеров и слайсов, состояние содержит все состояния этих слайсов. Состояние хранится в объекте, где каждый ключ - это то, что мы указали в reducer при создании стора. В нашем случае это свойство counter:

33 Рассмотрим интерактивный пример:

34 <a>https://codepen.io/hexlet/pen/bGodExN</a>

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

36 Осталось разобрать подключение мидлвар:

37 Мидлвары подключаются через свойство middleware. В это свойство мы записываем функцию, которая в свою очередь принимает другую функцию getDefaultMiddleware(). Вызвав ее, мы получаем список текущих мидлвар. К этим мидлварам добавляем наши мидлвары и возвращаем новый список.