Библиотека Redux
Redux входит в набор инструментов любого frontend-разработчика и применяется студентами направления веб-разработка в буткемпе для создания финального проекта. Узнайте, в чем секрет его популярности и для чего нужен Redux↓
Redux — автономная JavaScript-библиотека для работы с состоянием приложения.
* Состоянием приложения или State называют набор данных, которые определяют внешний вид и поведение приложения. Например, State приложения может включать в себя данные пользователя, текущие задачи и активные элементы и прочую информацию, влияющую на его работу. Хранилищем состояния, фиксирующим и передающим другим элементам приложения все его изменения, служит Redux.
Зачем нужен Redux
В чем проблема: структура приложений порой принимает форму генеалогического древа: в его корне лежит компонента, она связана с двумя другими, каждая из которых также связана с двумя другими и так далее. Состояние одной компоненты может понадобиться другой. Передавать это состояние придется через «дядей» и «тётей» этой компоненты с помощью посредников. Это замедляет процесс передачи информации и выполнения кода.
Что делает Redux: библиотека выносит состояние во внешнюю зависимость, вне системы компонент, и помогает синхронизировать данные. Так каждый компонент имеет доступ к информации напрямую и осведомлен обо всех изменениях.
Когда нужно использовать Redux
Некоторые библиотеки UI имеют встроенную систему управления состояниям. Для работы простых приложений Redux не нужен. Со всеми задачами библиотеки справится React, которая обеспечена стандартным менеджером состояний. Однако Redux может оказаться незаменим, если:
- Состояния приложения имеют большие объемы и с ними взаимодействуют многие элементы приложения
- Состояние приложения часто обновляется
- Над кодом приложения работают сразу несколько программистов
- Необходимо сделать поток данных предсказуемым и легким для отладки
- Следует обеспечить масштабируемость приложения.
Основные понятия
Для лучшего понимания принципа работы Redux следует изучить несколько его компонентов:
Actions
Действиями или Actions в Redux называют объекты, которые содержат информацию о последних изменениях в приложении и отправляют ее в хранилище. Объект действия должен иметь свойство type, описывающий, его тип, заданный в строке:
// Объявляем тип действия
const ADD_TODO = 'ADD_TODO';
// Пишем действие для добавления новой задачи в список дел
{
type: ADD_TODO,
payload: 'Создаю свое первое приложение с использованием Redux' // Ключ «payload» является полезной нагрузкой
} * Полезной нагрузкой или Payload называют поле, содержащее данные в объекте действия. В данном случае, «ADD_TODO» — описание задачи для приложения, то есть объект действия, а «Создаю свое первое приложение с использованием Redux» — его содержание. С помощью этого действия мы добавим в список дел задачу, которая будет содержать текст «Создаю свое первое приложение с использованием Redux».
Store
Хранилище, представляющее из себя объект JavaScript. Именно в нем фиксируется и хранится актуальная информация о состоянии приложения Redux. Основными командами для взаимодействия с хранилищем являются:
const currentState = store.getState();
// Позволяет получить текущее состояние
store.dispatch({ type: 'INCREMENT' });
// Метод для отправки действий в хранилище
const unsubscribe = store.subscribe(() => {
console.log('Состояние изменено:', store.getState());
});
// Команда, чтобы подписаться на изменения объекта и реагировать на него
store.replaceReducer(nextReducer);
// Метод, позволяющий заменить текущий корневой редуктор. О том, что такое редуктор, читайте ниже ↓
Reducers
Редуктор (англ. reducer) — это чистая функция, которая распознает отправленное в хранилище действие и определяет, как состояние приложения изменится в ответ на него. Оно не просто обновляет объект, а вычисляет новую версию состояния, создает новую и заменяет предыдущую.
* Непосредственную доставку действия в редуктор осуществляет диспетчер (англ. dispatch).
Data Flow
Поток данных в архитектуре Redux однонаправлен. Это значит, что вся информация в приложении проходит по одному жизненному сценарию, например:
- 1 — cоздание действия: сперва формулируется изменение, которое произошло в приложении и отправляется в виде действие к диспетчеру, который затем передает данные редукторам:
{ type: 'ADD_TODO', payload: 'Прочтите документацию Redux.' }
// Попросим приложение добавить задачу «прочитать документацию Redux» в to-do-list- 2 — обработка текущего состояния: редуктор проверяет состояние нынешнего хранилища и уточняет, соответствует ли оно действию:
let previousState = {
visibleTodoFilter: 'SHOW_ALL',
todos: [{
payload: 'Прочтите документацию.',
complete: false
}]
}
// Редуктор выяснил, что настоящая версия хранилища не соответствует действию, а значит ее нужно заменить новой- 3 — выполнение действия: редуктор активирует действие и добавляет задачу в список дел:
let action = {
type: 'ADD_TODO',
payload: 'Внесите корректировки.'
}- 4 — редуктор возвращает следующее состояние приложения: заменив при этом им предыдущее:
let nextState = todoApp(previousState, action)* Шагов может быть и больше в зависимости от действия, однако порядок действий всегда одинаков.
Процесс работы
Мы описали процесс работы Redux изнутри. Снаружи это выглядит так:
- Пользователь взаимодействует с UI приложения, например, нажав на кнопку. Это формулирует действие, которое отправляется к диспетчеру, а затем в редуктор. Состояние меняется.
- UI трансформируется с учетом нового состояния. Изменениям может подвергаться не 1 элемент интерфейса. Подписать на изменения состояния можно сразу несколько или все элементы, которые будут изменяться в зависимости от трансформации данных.
Три принципа Redux
Библиотека базируется на 3 принципах, которые идеально описывают ее образ работы:
- Есть лишь 1 источник истины о состоянии. Все данные хранятся в одном месте и никаких копий.
- Единственный способ изменить состояние — применить действие. Системе об изменениях сообщает только специальный объект, а не сам пользователь, которому доступно только чтение состояние, изменять его напрямую он не может.
- Изменения вносят чистые функции. Они же редукторы. Результат их выполнения зависит исключительно от грамотности составленных действий.
* На курсе веб-разработки в буткемпе вы будете изучать более сложные правила и компоненты Redux, в числе которых хуки useSelector(), useDispatch(), Action Types, Action Creators, Root Reducer, Redux DevTools, RTK, Slices, Thunk. Узнать все о курсе и подготовке к нему вам поможет эта статья.
