Введение

Официальный, самоуверенный набор инструментов с батарейками для эффективной разработки 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

Как отдельное приложение

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 и apollo-boost, мы можем попыпаться предоставить некоторые инструменты, которые абстрагируют процесс настройки и покрывают наиболее распространенные варианты использования, а также предоставить некоторые полезные утилиты, которые позволят пользователю упростить код своего приложения.

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

Что включено

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

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

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

• createAction(): создает генератор экшена для переданного типа. В самой функции определена функция toString (), поэтому ее можно использовать вместо константы типа.

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

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

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

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

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

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