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

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

Однако за Redux приходится платить - его утомительно настраивать, и в нем есть изрядная доля шаблонного кода.

Пакет redux toolkit решает некоторые проблемы, которые есть у библиотеки Redux, например, написание избыточного стандартного кода.

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

  • Слишком сложно настроить хранилище Redux.
  • Мне нужно добавить много пакетов, чтобы Redux делал что-нибудь полезное.
  • Redux требует слишком большого количества шаблонного кода.

Начиная

Рекомендуемый способ запуска новых приложений с React и Redux Toolkit - использование официального шаблона Redux + JS для Create React App, который использует преимущества интеграции React Redux с компонентами React.

npx create-react-app my-react-redux-app --template redux

Стандартная настройка магазина

Пример ниже взят из страницы Настройка вашего магазина. В документации Redux показан типичный процесс настройки магазина.

Этот пример выше многословен и не всегда прост. Функция Redux createStore принимает позиционные аргументы: (rootReducer, preloadedState, enhancer) - легко забыть, какой параметр есть какой.

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

Документация Redux DevTools Extension изначально предлагает использовать некоторый рукописный код, который проверяет глобальное пространство имен, чтобы узнать, доступно ли расширение. Проблема заключается в том, что многие разработчики копируют и вставляют эти фрагменты, что в целом затрудняет чтение установочного кода.

Упрощение настройки магазина с помощью redux-kit

Вместо того, чтобы писать собственный магазин, давайте воспользуемся встроенной версией из библиотеки redux-kit. Ниже приведен пример того, как вы можете импортировать и использовать функцию configureStore.

Самый простой способ использовать configureStore - просто передать функцию корневого редуктора в качестве параметра с именем reducer.

Кроме того, configureStore по умолчанию добавляет некоторое промежуточное программное обеспечение, каждое из которых имеет определенную цель:

  • redux-thunk - наиболее часто используемое промежуточное ПО для работы как с синхронной, так и с асинхронной логикой вне компонентов.
  • В разработке промежуточное ПО, которое проверяет типичные ошибки, такие как изменение состояния или использование несериализуемых значений.

configureStore помогает со следующими

  • Наличие объекта параметров с «именованными» параметрами, которые легче читать.
  • Позволяет вам предоставлять массивы промежуточного программного обеспечения и средств улучшения, которые вы хотите добавить в магазин.
  • Звоню applyMiddleware и compose для вас.
  • Включение расширения Redux DevTools из коробки.

Сам код настройки магазина намного короче и легче читается. Он также предоставляет вам отличную функциональность прямо из коробки.

Настройте параметры магазина

В случае, если вам нужно настроить настройку магазина - вы можете передать дополнительные параметры.

Вот как может выглядеть пример горячей перезагрузки с использованием Redux Toolkit.

Если вы укажете аргумент middleware, configureStore будет использовать только то промежуточное ПО, которое вы указали.

Если вы хотите связать какое-то специальное промежуточное ПО и значения по умолчанию, вы можете вызвать getDefaultMiddleware и включить результаты в массив middleware, который вы предоставите.

Упрощение редукторов с createReducer

Redux Toolkit включает createReducer функцию, аналогичную той, что показана в документации Redux. Однако в нашей createReducer утилите есть особая «магия», которая делает ее еще лучше.

Он использует внутреннюю библиотеку Immer, которая позволяет вам писать код, который мутирует некоторые данные, но фактически применяет обновления неизменным образом. Это делает практически невозможным случайное изменение состояния в редукторе.

Рекомендации по использованию createReducer Function

Хотя функция Redux Toolkit createReducer полезна, помните об этом:

  • «Мутирующий» код корректно работает только внутри нашей createReducer функции.
  • Immer не позволит вам смешивать «мутацию» состояния черновика с возвратом нового значения состояния.

См. createReducer Справочник по API для получения более подробной информации.

Определение создателей действий с createAction

Написание создателей действий вручную станет утомительным занятием и потребует большого количества шаблонного кода.

Redux Toolkit предоставляет функцию под названием createAction, которая просто генерирует создателя действия, который использует данный тип действия и превращает его аргумент в поле payload.

createAction также принимает аргумент «подготовить обратный вызов», который позволяет вам настроить результирующее поле payload и, при необходимости, добавить поле meta.

См. createAction Справочник по API для получения подробной информации об определении создателей действий с помощью обратного вызова prepare.

Если вам интересно, ознакомьтесь с официальной документацией для более подробного изучения.

Заключение

Спасибо за чтение - надеюсь, вам пригодится новый подход. Удачного кодирования!