В этой статье мы собираемся изучить Redux Toolkit, который определяется командой разработчиков как «официальный, самоуверенный набор инструментов с батарейками для эффективной разработки Redux».

Что такое Redux и как это работает

Большинство из нас, разработчиков, наверняка слышали о Redux, так как это очень популярная библиотека управления состоянием. Он разработан Дэном Абрамовым и Эндрю Кларком и представлен миру фронтенда в 2015 году.

Компонент в трех лучших интерфейсных фреймворках, таких как React Angular и Vue, имеет собственное внутреннее управление состоянием. Но управление состоянием становится утомительным и трудным, когда наше приложение становится более сложным. Redux стал решением этой проблемы.

Redux имеет центральное хранилище, в котором хранятся все состояния приложения. Каждый компонент приложения может использовать это хранилище без необходимости передавать реквизиты в дереве компонентов.

Рабочий процесс Redux

Обычный рабочий процесс Redux состоит из 4 важных частей, которые приведены ниже:

  1. Пользователь взаимодействует с представлением, чтобы инициировать обновление состояния.
  2. Когда требуется обновление состояния, представление отправляет действие.
  3. Редьюсеры получают действие от отправки и обновляют состояние в Store в соответствии с описанием действия.
  4. Представление подписано на Магазин для прослушивания изменений состояния. Об изменениях сообщается с помощью методов подписки, и представление соответствующим образом обновляет свой пользовательский интерфейс.

Поток Redux зависит от трех ключевых игроков, а именно:

  1. Действие
  2. Редуктор
  3. Магазин

Прежде чем углубиться в Redux Toolkit, мы должны понять приведенных выше 3 ключевых игроков.

Действия

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

Пример действия

Тип действия — это просто строка, описывающая действие, а добавленные свойства — это информация, необходимая для обновления состояния. Действие отправляется с помощью метода store.dispatch(action), а редукторы обрабатывают обновление состояния.

Редукторы

Редюсеры — это чистые функции, которые принимают текущее значение состояния, выполняют над ним операции в соответствии с инструкциями действия, а затем выводят новое значение состояния. Именно они несут ответственность за изменение ценности состояния.

Пример редуктора

Магазин

Магазин — это место, где управляются все состояния.

Пример магазина

Зачем Redux Toolkit, если Redux доступен

Выше мы видели, почему Redux был известным вариантом для управления состоянием. Можно сказать, что это шаблон, который делает состояния предсказуемыми, потому что, как мы знаем, редукторы — это чистые функции, что означает, что одно и то же состояние и переданные действия всегда приводят к одному и тому же результату.

Но в нем есть некоторые сложности, которые заключаются в следующем:

  1. Слишком много кода для настройки Магазина на оптимизированные уровни/рекомендации.
  2. Слишком много шаблонного кода делает код менее чистым и эффективным.
  3. Слишком много пакетов необходимо установить для создания масштабируемых приложений.
  4. Написание действий и редюсеров становится более сложным и громоздким в больших приложениях.

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

Шаги по внедрению Redux Toolkit

Шаг 1: Установите пакеты

Прежде всего вам нужно запустить следующую команду в существующем приложении React:

Шаг 2: Создайте и инициализируйте магазин

Теперь нам нужно создать хранилище, чтобы хранить наши состояния. Мы можем создать файл store.js в нашей папке src и добавить в него следующий код:

Здесь configureStore заменяет оригинальный createStore из Redux. В отличие от createStore, configureStore из Redux Toolkit не только создает хранилище, но также может принимать функции редуктора в качестве аргументов и автоматически настраивает расширение Redux DevTools Extension для упрощения отладки.

Шаг 3. Предоставьте Store в приложении React

Когда наш магазин будет создан, нам понадобится доступ к каждому компоненту в нашем приложении React. Мы можем сделать это с помощью Provider из нашего установленного пакета react-redux.

В нашем файле index.js мы импортируем Provider и наш store.js следующим образом:

Шаг 4: напишите редьюсеры и действия

В традиционном Redux мы обычно пишем редьюсеры и действия отдельно. Но с помощью Redux Toolkit мы можем сделать код намного более кратким, используя createSlice. Создайте файл counterSlice.js в папке src приложения. И редукторы, и действия могут быть написаны под слайсом следующим образом:

Как видно из приведенного выше кода, определение редюсеров и действий становится проще и быстрее в Redux Toolkit. Больше нет необходимости использовать операторы switch для управления действием с соответствующим редюсером.

Еще одна вещь, которую вы, возможно, заметили, это то, что теперь мы напрямую изменяем значение состояния в функции редуктора вместо того, чтобы возвращать новое значение для обновления состояния. Собственно потому, что Redux Toolkit использует библиотеку Immer, позволяющую писать «мутирующую» логику в редюсерах.