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.
Если вам интересно, ознакомьтесь с официальной документацией для более подробного изучения.
Заключение
Спасибо за чтение - надеюсь, вам пригодится новый подход. Удачного кодирования!