Redux Toolkit

Официальный, самоуверенный набор инструментов с батарейками для эффективной разработки Redux

(Ранее известный как "Redux Starter Kit")

Установка

Используя Create React App

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

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

Или, если вы пользователь TypeScript, используйтеcra-template-redux-typescript, который основан на этом шаблоне

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

Существующее приложение

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

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

Он также доступен, в виде прекомпилированного UMD пакета, который определяет глобальную переменную window.RTK UMD пакет можно использовать напрямую через тэг <script>.

Цель

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

"Конфигурирование Redux стора слишком сложное"
"Мне нужно добавить много пакетов, чтобы заставить Redux делать что-то полезное"
"Redux требует слишком много шаблонного кода"

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

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

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

Что включено

Redux Toolkit предоставляет следующие API:

configureStore(): оборачивает createStore, чтобы предоставить упрощенные параметры конфигурации и значений по умолчанию. Он может автоматически комбинировать ваши слайсы редьюсеров, добавлять любые мидлвары Redux, по умолчанию включает redux-thunk и позволяет использовать расширение Redux DevTools.
createReducer(): позволяет вам использовать таблицу соответствия типов экшенов с функциями редьюсера, вместо написания операторов switch. Кроме того, он автоматически использует библиотеку immer чтобы вы могли писать более простые иммутабельные обновления в обычном мутабельном стиле, например state.todos[3].completed = true.
createAction(): создает генератор экшена для переданного типа. В самой функции определена функция toString (), поэтому ее можно использовать вместо константы типа.
createSlice(): комбинирует createReducer() + createAction(). Принимает объект с функцией редьюсера, название слайса, значение начального состояния и автоматически создает слайс-редьюсер, с соответствующими генераторами и типами экшенов.
-createListenerMiddleware(): позволяет вам определить записи обработчика событий, которые содержат "effect" коллбэк с дополнительной логикой, а также способ указать, когда этот коллбэк должен выполняться на основе отправленных действий или изменений состояния. Облегченная альтернатива асинхронным мидлварам Redux, такому как саги и observables.
createAsyncThunk: принимает строку типа экшена и функцию, которая возвращает промис и генерирует thunk, который диспатчит pending/fulfilled/rejected типы экшенов на основе этого промиса
createEntityAdapter: создает набор переиспользуемых редьюсеров и селекторов, для управления нормализованными данными в сторе
УтилитаcreateSelector из библиотеки Reselect, реэкспортируемая для удобства использования.

RTK Query

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

RTK Query построен на основе ядра Redux Toolkit, используя внутреннюю архитектуру Redux. Хотя знание Redux и RTK не требуется для использования RTK Query, вам следует изучить все дополнительные возможности управления глобальным хранилищем, которые они предоставляют, а также установить [расширение браузера Redux DevTools](https://github.com/reduxjs/ redux-devtools), который безупречно работает с RTK Query для просмотра и воспроизведения временной шкалы вашего запроса и поведения кеша.

RTK Query включен в установку основного пакета Redux Toolkit. Он доступен через любой из двух вариантов:

import { createApi } from '@reduxjs/toolkit/query'

/* Точка входа, специфичная для React, которая автоматически генерирует хуки, соответствующие
определенным конечным точкам */
import { createApi } from '@reduxjs/toolkit/query/react'

Что включено

RTK Query включает следующие API:

createApi(): Ядро функциональности RTK Query. Он позволяет вам определять набор эндпоинтов, описывающих, как извлекать данные из серии эндпоинтов, включая конфигурацию того, как запрашивать и преобразовывать эти данные. В большинстве случаев вы должны использовать это один раз для каждого приложения, используя в качестве практического правила «один фрагмент API на базовый URL-адрес».
fetchBaseQuery(): Небольшая оболочка для fetch, которая упрощает запросы. Предназначен как рекомендуемый baseQuery для использования в createApi для большинства пользователей.
<ApiProvider />: Может использоваться в качестве Provider, если у вас еще нет стора Redux.
setupListeners(): Утилита, используемая для включения поведения refetchOnMount и refetchOnReconnect.

См. страницу Обзор RTK Query для получения дополнительных сведений о том, что такое RTK Query, какие проблемы он решает и как его использовать.