Неофициальный Бета-перевод

Эта страница переведена PageTurner AI (бета). Не одобрена официально проектом. Нашли ошибку? Сообщить о проблеме →

Что такое Redux Toolkit?

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

Он содержит набор утилит, упрощающих наиболее распространённые сценарии работы с Redux: настройку хранилища, определение редюсеров, иммутабельные обновления состояния и даже создание целых "срезов" состояния (slices) без ручного написания создателей действий (action creators) или типов действий. Также в него включены популярные Redux-расширения, такие как Redux Thunk для асинхронной логики и Reselect для селекторов, что позволяет использовать их сразу из коробки.

Установка

Redux Toolkit доступен как пакет на NPM для использования со сборщиком модулей или в Node-приложении:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

Цель создания

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

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

Redux Toolkit изначально создавался для решения трёх распространённых проблем Redux:

• "Настройка Redux-хранилища слишком сложна"

• "Требуется много дополнительных пакетов для полезной работы с Redux"

• "Redux требует слишком много шаблонного кода"

Мы не можем охватить все случаи, но в духе create-react-app и apollo-boost мы предлагаем официальный набор инструментов, решающих наиболее частые задачи и сокращающих необходимость принимать лишние решения.

Почему стоит использовать Redux Toolkit

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

Обратите внимание: использование Redux Toolkit не является обязательным для работы с Redux. Существует множество приложений, использующих другие библиотеки-обёртки или полностью ручное написание логики, и если вы предпочитаете иной подход — это допустимо!

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

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

Что входит в комплект

Redux Toolkit включает:

• configureStore(): обёртка над createStore с упрощённой конфигурацией и оптимальными настройками по умолчанию. Автоматически комбинирует редюсеры срезов, добавляет указанные middleware, включает redux-thunk по умолчанию и активирует Redux DevTools Extension.

• createReducer(): позволяет передавать таблицу соответствия типов действий функциям-редьюсерам вместо написания операторов switch. Кроме того, автоматически использует библиотеку immer для записи простых иммутабельных обновлений через мутабельный синтаксис, например state.todos[3].completed = true.

• createAction(): генерирует функцию-создатель действия для указанной строки типа действия. Сама функция имеет определенный метод toString(), что позволяет использовать её вместо константы типа.

• createSlice(): принимает объект функций-редьюсеров, имя слайса и начальное состояние, затем автоматически генерирует редьюсер слайса с соответствующими создателями действий и типами действий.

• createAsyncThunk: принимает строку типа действия и функцию, возвращающую промис, затем генерирует санк, который диспатчит типы действий pending/fulfilled/rejected на основе этого промиса.

• createEntityAdapter: генерирует набор переиспользуемых редьюсеров и селекторов для управления нормализованными данными в хранилище.

• Утилита createSelector из библиотеки Reselect, реэкспортированная для удобства использования.

Redux Toolkit также включает API для загрузки данных RTK Query. RTK Query — мощный инструмент для загрузки и кэширования данных, созданный специально для Redux. Он разработан для упрощения типичных сценариев загрузки данных в веб-приложениях, избавляя от необходимости самостоятельно писать логику получения данных и кэширования.

Документация

Полная документация по Redux Toolkit доступна на https://redux-toolkit.js.org.