Что такое редукс кратко

Обновлено: 04.07.2024

Всё, что находится в оперативной памяти компьютера и относится к работе программы, можно назвать состоянием приложения. Приложения могут быть составлены из блоков, модулей и компонентов. У каждого блока может быть своё собственное состояние. У выпадающего списка собственным можно считать состояние признака видимости опций. Это следствие того, что пока значение выпадающего списка не поменялось, поведение остальных частей приложения не изменится.

Глобальное состояние приложения — это часть состояния приложения, которое используется, учитывается и изменяется в разных частях, модулях, компонентах этого приложения.

Будем считать, что остальные части приложения меняют свое поведение в зависимости от того, какой пункт списка выбран. Это и есть пример глобального состояния.

Глобальное состояние должно быть доступно из любой части приложения, а при его изменении компоненты приложения должны произвести необходимые вычисления. Следовательно, нам необходимо правильно управлять глобальным состоянием.

Из чего состоит Flux-архитектура

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

Действия котика и его состояние составляют сущность его существа. Мы можем смоделировать такое поведение и в наших программах с помощью компонентов. Каждый компонент содержит необходимые данные и определяет методы их изменения. Такой компонентный подход может быть реализован в архитектуре MVC.

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

Во Flux-архитектуре такое глобальное состояние предложено вынести в хранилища, отделить его от компонентов. А изменение состояния производить через специальные ворота, называемые диспетчерами. В этом случае поток управления меняет направление: изменение состояния переходит от представлений к диспетчеру, а новое состояние предоставляется всем представлениям сразу.

Во Flux-архитектуре состояние является общим для многих представлений.

Что такое Redux?

Flux-архитектура — это идея. Идею можно реализовать разными способами, и один из них — Redux.

Redux — это реализация Flux на JavaScript. Эту реализацию удобно применять в веб-приложениях для управления общим глобальным состоянием. У неё есть специальная привязка для использования с React, о которой мы поговорим позднее.

Redux удобно использовать, когда

Требуется синхронизировать состояние между многими компонентами;
Постоянно приходится контролировать изменение состояния во времени — time travel debug;
Приходится перехватывать и вмешиваться в процесс изменения состояния используя middleware.

Использовать Redux можно и в vanila javascript приложениях. Для этого надо подключить библиотеку, например, из CDN.

Познакомимся поближе с составными частями Redux.

Анатомия Redux — action, store, reducer, dispatch.

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

Action

Как и в оригинальной идее Flux, у Redux есть понятие действия — Action . Action это обычный объект JavaScript. Этот объект попадается на глаза разработчику дважды. В первый раз, когда JavaScript реагирует на событие, а во второй раз, когда сведения из объекта встраиваются в хранилище.

В нашем приложении объект, описывающий действие, будет содержать дату, время и координаты мыши. Этот объект можно создать с помощью функции-фабрики.

reducer

Написанная нами функция createMouseClickAction возвращает объект с двумя полями — type и payload . Мы можем использовать полученный объект, чтобы обновить наш список. Реализуем это обновление в специальной функции. Допустим, что в параметрах она будет получать текущий список и наш объект и добавлять payload в конец списка.

Мы назвали функцию обновления состояния reducer , но это просто дань традиции. Всё же функция имеет определенные особенности. Она

Не обновляет полученный массив, а копирует его;
Проверяет тип аргумента action;
Возвращает исходное состояние, если action не понятен.

store

В составе библиотеки redux.js есть функция создания хранилища createStore . Используем её для создания хранилища и подключим к нему несколько представлений, которые создадим такой функцией.

dispatch

На этом приложение закончено. Работающий пример и полный код примера можно найти на JSFiddle.

Всё то же самое, но в связке с React

Redux создавали для использования вместе с React, а сама связка помещена создателями в пакет react-redux. В нём содержатся сервисные функции для удобства использования store.subscribe , store.dispatch . Доступны два стиля их использования:

Функция connect создает обертку вокруг вашего компонента и подключает его к хранилищу.
Хуки useDispatch, useSelector делают ту же работу, но для функциональных компонентов.

Реализуем в React ту же функциональность, что и в предыдущем разделе. Дополнительно нам потребуется библиотека react-redux .

Функции createMouseClickAction и reducer остаются без изменений.

Вместо createView мы создадим компонент View:

В этом коде сравните строки

из предыдущего примера.

Вместо прямого подключения обработчика событий используем useEffect для своевременного снятия обработчика.

Обратите внимание на способ получения функции dispatch .

Функции useSelector и useDispatch могут выполнять свою роль, только если мы правильно присоединим React-приложение к хранилищу store нашего Redux.

Вы помните, что в предыдущем приложении мы создавали хранилище так:

const store = Redux.createStore(reducer) .

В этот раз ничего не поменялось. А вот созданное хранилище мы подключим к приложению React с помощью ReactRedux.Provider .

На этом всё — мы сделали такое же приложение, только на React. Собранное работающее приложение можно найти на JSFiddle.

В качестве самостоятельной работы попробуйте модифицировать пример так, чтобы в левой части страницы перечислялись записи от нажатии мыши в левой части экрана, а в правом view — правые клики.

Альтернативы Redux

Redux — далеко не единственная возможность управления глобальным состоянием.

В банковском приложении один из атрибутов глобального состояния — баланс клиентского счета. Очевидно, что источник этого значения не может находиться на стороне браузера, потому что правильное значение баланса — ответственность банковского сервера.

Правильно ли использовать в таком случае использовать Redux для хранения остатков по счетам? Похоже, что нет.

Redux — не лучшее решение для ситуации, когда глобальное состояние — более глобальное, чем окно браузера.

Поэтому следует знать о альтернативных возможностях управления состоянием

Выбирайте с умом и используйте тот способ, который лучше подходит для ваших задач.

Что такое Redux ? Это менеджер состояний. Чаще всего его используют с React, но его возможности не ограничиваются одной этой библиотекой. Хотя в React есть собственный метод управления состояниями (почитать о нём можно в руководстве по React), он плохо масштабируется. Перемещение состояния вверх по дереву работает для простых приложений, но в более сложных архитектурах изменение состояния производится через свойства (props). Ещё лучше делать это через внешнее глобальное хранилище.

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

Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
Содержание:

Когда нужно пользоваться Redux?

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

Простым приложениям Redux не нужен.

Использование Redux

Разберём основные концепции библиотеки Redux, которые нужно понимать начинающим.

Неизменяемое дерево состояний

В Redux общее состояние приложения представлено одним объектом JavaScript — state (состояние) или state tree (дерево состояний). Неизменяемое дерево состояний доступно только для чтения, изменить ничего напрямую нельзя. Изменения возможны только при отправке action (действия).

Действия

Действие (action) — это JavaScript-объект, который лаконично описывает суть изменения:

Единственное требование к объекту действия — это наличие свойства type , значением которого обычно является строка.

Типы действий должны быть константами

В простом приложении тип действия задаётся строкой. По мере разрастания функциональности приложения лучше переходить на константы:

и выносить действия в отдельные файлы. А затем их импортировать:

Генераторы действий

Генераторы действий (actions creators) — это функции, создающие действия.

Обычно инициируются вместе с функцией отправки действия:

Или при определении этой функции:

Редукторы

При запуске действия обязательно что-то происходит и состояние приложения изменяется. Это работа редукторов.

Что такое редуктор

Редуктор (reducer) — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.

Чистая функция работает независимо от состояния программы и выдаёт выходное значение, принимая входное и не меняя ничего в нём и в остальной программе. Получается, что редуктор возвращает совершенно новый объект дерева состояний, которым заменяется предыдущий.

Чего не должен делать редуктор

Редуктор — это всегда чистая функция, поэтому он не должен:

мутировать аргументы;
мутировать состояние. Вместо этого создаётся новое состояние с помощью Object.assign(<>, . ) ;
иметь побочные эффекты (никаких API-вызовов с какими-либо изменениями);
вызывать нечистые функции. Это функции, результат которых зависит от чего-то кроме их аргументов (например, Date.now() или Math.random() ).

Поскольку состояние в сложных приложениях может сильно разрастаться, к каждому действию применяется не один, а сразу несколько редукторов.

Симулятор редуктора

Упрощённо базовую структуру Redux можно представить так:

Состояние

Список действий

Редуктор для каждой части состояния

Редуктор для общего состояния

Хранилище

Хранилище (store) — это объект, который:

содержит состояние приложения;
отображает состояние через getState() ;
может обновлять состояние через dispatch() ;
позволяет регистрироваться (или удаляться) в качестве слушателя изменения состояния через subscribe() .

Хранилище в приложении всегда уникально. Так создаётся хранилище для приложения listManager:

Вот вы прочитали мою статью про React (если нет, то настоятельно рекомендую вам сделать это) и начали разрабатывать приложения на нём. Но что это? Вы замечаете, как с расширением вашего приложения становится всё сложнее следить за текущим состоянием, сложно следить за тем, когда и какие компоненты рендарятся, когда они не рендарятся и почему они не рендарятся, сложно следить за потоком изменяющихся данных. Для этого и есть библиотека Redux. Сам React хоть и лёгкий, но для комфортной разработки на нем нужно много чего изучить.

И сегодня мы разберём 2 библиотеки: Redux и React-redux. Для использования Redux'а вам не нужно скачивать дополнительных библиотек, но, если использовать его в связке с библиотекой React-redux разработка становится ещё удобнее и проще.

Все примеры из этой статьи вы можете найти в этом репозитории на Github. Там находится полностью настроенное приложение React с использованием Redux и React-redux. Вы можете использовать его как начальную точку для вашего проекта. Изменяйте названия файлов и добавляйте новые в этот репозитории для создания собственного приложения. Смотрите во вкладку релизы для того что бы найти разные версии приложения. Первая содержит приложение только с использованием Redux, второе с использованием Redux и React-redux.

Мотивация использования Redux

Механизм локального хранилища компонента, который поставляется вместе с базовой библиотекой (React) неудобен тем, что такое хранилище изолировано. К примеру, если вы хотите, чтобы разные независимые компоненты реагировали на какое-либо событие, вам придётся либо передавать локальное состояние в виде пропсов дочерним компонентам, либо поднимать его вверх до ближайшего родительского компонента. В обоих случаях делать это не удобно. Код становится более грязным, трудночитаемым, а компоненты зависимыми от их вложенности. Redux снимает эту проблему так как всё состояние доступно всем компонентом без особых трудностей.

Redux является универсальным средством разработки и может быть использован в связке с различными библиотеками и фреймворками. В этой же статье будет рассматривается использование Redux в React приложениях.

1. Установка Redux и начало работы

Используете ли вы Yarn или Npm, выполните одну из этих команд для установки Redux:

Скорее всего вы используете папку src в которой хранится ваша кодовая база. Файлы, связанные с redux принято хранить в отдельной папке. Для этого я использую папку /src/store в которой хранится всё то, что связано с Redux и хранилищем приложения. Вы можете назвать ее по другому или поместить в другое место.

Создайте базовую структуру для хранилища. Она должна выглядит примерно следующим образом:

.store
├── actionCreators
│ ├── action_1.js
│ └── action_2.js
├── actions
│ ├── action_1.js
│ └── action_2.js
├── reducers
│ ├── reducer_1.js
│ ├── reducer_2.js
│ └── rootReducer.js
├── initialState.js
└── store.js

Конечно здесь я использовал примитивные названия для файлов, это сделано для наглядности. В настоящем проекте так называть файлы не стоит.

2. Redux

2.1 createStore

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

Глобальное хранилище приложения создаётся в отдельном файле, который как правило называется store.js:

2.2 reducer()

reducer — чистая функция которая будет отвечать за обновление состояния. Здесь реализовывается логика в соответствие с которой будет происходить обновление полей store.

Так выглядит базовая функция reducer:

Функция принимает значение текущего состояния и обьект события (action). Обьект события содержит два свойства — это тип события (action.type) и значение события (action.value).

К примеру если нужно обработать событие onChange для поля ввода то объект события может выглядеть так:

ACTION_1 и ACTION_2 это константы событий. По-другому Actions. Про них мы поговорим далее 2.5 Actions.

Как вы уже догадались store может хранить сложную структуру данных состоящих из набора независимых свойств. Обновление одного свойства оставит нетронутым другие свойства. Так из примера выше, когда происходит событие номер один (ACTION_1) обновляется поле номер один (value_1) в store при этом поле номер два (value_2) остаётся нетронутым. В общем механизм схож с методом this.setState().

2.3 dispatch()

Что бы обновить store необходимо вызвать метод dispatch(). Он вызывается у объекта store который вы создаёте в store.js. Этот объект принято называть store поэтому обновление состояния в моём случае выглядит так:

ACTION_1 это константа события о которой речь пойдет дальше (см. Actions).

Эта функция вызовет функцию reducer который обработает событие и обновит соответствующие поля хранилища.

2.4 actionCreator()

На самом деле передавать объект события напрямую в dispatch() является признаком плохого тона. Для этого нужно использовать функцию под названием actionCreator. Она делает ровно то что и ожидается. Создаёт событие! Вызов этой функции нужно передавать как аргумент в dispatch а в actionCreator передавать необходимое значение (value). Базовый actionCreator выглядит следующим образом:

Таким образом вызов dispatch должен выглядеть так:

С использованием actionCreator код становится более чистым.

2.5 Actions

actions это константы, описывающие событие. Обычно это просто строка с названием описывающее событие. К примеру константа описывающее событие номер один будет выглядеть следующем образом:

Опять же в проекте вам стоит называть константы в соответствии с событием, которое она описывает: onClick, createUserSesion, deleteItem, addItem и т.д. Главное, чтобы было понятно. Замете что я нигде не писал import поэтому не забудьте импортировать ваши константы перед их использованием. Потому что константы тоже принято разбивать на отдельные файлы храня их в специальной папке. Хотя некоторые хранят их в одном файле под названием actionTypes.js. Такое решение нельзя назвать не правильным, но и не идеальным.

2.6 getState()

С помощью dispatch() обновили, а как теперь посмотреть новое значение store? Ничего изобретать не нужно, есть метод getState(). Он также, как и метод dispatch вызывается на экземпляре объекта store. Поэтому для моего примера вызов

вернёт значение полей хранилища. К примеру что бы посмотреть значение поля value_1 необходимо будет вызвать

2.7 subscribe()

2.8 combineReducers()

combineReducers() позволяет объединить несколько редьюсеров в один.

Если логика обновления компонентов довольно сложна и\или необходимо обрабатывать большое количество различных типов событий, то корневой reducer может стать слишком громоздким. Лучшим решением будет разбить его на несколько отдельных редьюсеров каждый из которых отвечает за обработку только одного типа событий и обновления определённого поля.

Когда вы разбиваете базовый редьюсер на несколько, то название каждого из них должно соответствовать полю которое он обновляет в store.

К примеру если редьюсер обновляет поле номер один, то он может выглядеть так:

Название редьюсера (value_1) показывает какое свойство он будет обновлять в store. Если переименуете его в value_2 то он станет обновлять value_2. Поэтому учтите это!

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

Но когда вы разделили ваши редьюсеры вам нужно просто вернуть новое значение:

Поскольку здесь не требуется указывать которое из полей обновляет редьюсер ибо его название и есть поле которое он обновляет.

2.9 initialState

initialState — объект, представляющий начальное состояние хранилища. Он является вторым не обязательным аргументом метода createStore(). С созданием хранилища можно сразу объявить начальное состояние для его полей. Этот объект желательно создавать, даже в тех случаях, когда объявления начального состояния не требуется. Потому что этот объект помогает посмотреть на структуру хранилища и название его полей. Обычный объект initialState выглядит следующим образом:

В некоторых случаях (когда компонент сразу использует значение из store), его объявление может стать обязательным иначе вы получите ошибку: TypeError: Cannot read property 'value_1' of undefined.

Также редьюсеры всегда должны возвращать по дефолту текущее состояние. К примеру, если используется единый reducer то последнее значение в switch должно выглядеть так:

Если же вы разделяете редьюсеры на независимые функции, то он должен возвращать значение того свойства за которое он отвечает:

Также если вы не передаёте объект initialState в createStore вы можете вернуть его из редьюсера. В обоих случаях будет инициализировано начальное состояние для store.

3. React-redux

Казалось бы, у нас есть всё что бы использовать Redux. Но на деле использование его без пакета React-redux в React приложениях выглядит не очень красиво.

3.1 Provider

Для использование store в компоненте вам необходимо передавать его в пропсы:

И после использовать в компоненте: this.props.state. Для этого react-redux предостовляет метод Provider:

Также можно передать store напрямую в компонент, не оборачивая его в Provider и это будет работать. Но лучше всё-таки используйте Provider.

3.2 mapStateToProps()

Этот метод вызывается всякий раз, когда происходит обновление store и именно он передаёт необходимые свойства из store в компонент. К примеру компонент, должен реагировать и обновлять UI каждый раз, когда поле номер один (value_1) обновилось. На обновление других полей ему реагировать не нужно. Если вы не используете React-redux вам бы пришлось использовать метод subscribe() что бы узнавать об обновлении и далее каким то образом проверять обновилось ли поле номер один или нет. В общем несложно понять, что такой код будет выглядеть слишком грязным и избыточным. С помощью mapStateToProps() можно чётко определить какие поля интересуют компонент. И на какие поля он должен реагировать.

Возвращаясь к примеру выше, если компоненту один нужно получать поле номер один (value_1) то mapStateToProps для него будет выглядеть следующим образом:

После внутри компонента мы можем обращается к полю value_1 через this.props.value_1. И каждый раз когда это поле будет обновляется компонент будет рендерится заново.

Вы можете создать отдельную папку в /src/store для хранения файлов каждый из которых будет содержать функцию mapStateToProps для всех ваших компонентов. Либо (как сделал это я) использовать единую функцию возвращающую функцию mapStateToProps для каждого компонента. Лично мне нравится такой подход. Такая функция выглядит следующим образом:

Эта функция в качестве аргумента принимает строку с названием компонента и возвращает функцию mapStateToProps которая возвращает объект со свойством из store необходимом для данного компонента. Эту функцию можно назвать mapStateToPropsGenerator().

3.3 mapDispatchToProps()

Эта функция передаёт в компонент методы для обновления необходимого поля store. Что бы не вызывать dispatch напрямую из компонента вы будете использовать данный метод для того что бы передавать в props метод вызов которого приведёт к вызову dispatch и обновлению соответствующего поля. Просто теперь это будет выглядеть более элегантно, а код более понятным и чистым.

К примеру компонент, номер один должен иметь возможность обновлять поле номер один из store. Тогда mapDispatchToProps для него будет выглядеть следующим образом:

bindActionCreators следует импортировать из redux. Он позволяет оборачивать функцию dispatch и actionCreator в единый объект. Вы можете не использовать bindActionCreators но тогда код будет выглядеть избыточным. Вы должны старятся реализовать какую-либо функциональность так, чтобы код выгладил просто и миниатюрно. Поэтому ничего лишнего писать не следует.

Только чистый и понятный код. Метод bindActionCreators(actionCreator, dispatch) принимает два обязательных параметра это функцию actionCreator о которой мы уже говорили и dispatch. Возвращая метод для изменения полей store.

Также как и для mapStateToProps я использую функцию генератор возвращающую функцию mapDispatchToProps для каждого компонента:

3.4 connect()

Ну и теперь кульминация! То без чего всё это не будет работать. Это функция connect.
Именно она связывает mapStateToProps и mapDispatchToProps с компонентом и передает необходимые поля и методы в него. Возвращает она новый компонент-обёртку для вашего компонента. Как правильно именовать такой компонент я не знаю, ибо в самой документации React-redux это не описывается. Лично я добавляю окончание _w для компонентов оберток. Как бы _w = wrap Component. Подключение компонента в этм случае выглядит так:

И теперь в ReactDOM.render() вы передаёте не ваш компонент, а тот что возвращает функция connect.

Если же у компонента нет необходимости в передаче ему mapStateToProps или mapDispatchToProps передавайте undefined или null в него.

Redux — это инструмент для управления состоянием данных и пользовательским интерфейсом в приложениях JavaScript с большим количеством сущностей. Представляет собой библиотеку JavaScript.

Обычно Redux используется в связке с фреймворками для JavaScript: React, TypeScript, Vue, Angular и другими. Реже он бывает нужен для написания кода на чистом JS. Имеет открытый исходный код и доступен бесплатно. Со всеми зависимостями весит всего около 2 Кб.

Для чего нужен Redux

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

Освойте программирование, backend-разработку на Java, Spring и основы DevOps.

Зачем нужен объект состояния

Состояние, или state, — это концепт, который обычно используют в сложных программах. Большое приложение содержит много данных, которые в любой момент могут потребоваться тому или иному компоненту.

Компоненты могут общаться напрямую, но в сложной программе реализовывать такой подход неудобно. Необходимо дописывать каждую функцию. Это загромождает код.

Поэтому требуется состояние — объект, который можно сравнить с диспетчерской. Он получает, хранит и при необходимости передает одним компонентам данные других. К нему можно обратиться, чтобы узнать, нажата ли кнопка, какое значение сейчас у переменной, выбрано ли условие. Это удобнее и проще, чем получать сведения непосредственно от компонента.

Объектом состояния нужно управлять, иначе при работе с большими программами неизбежны ошибки. Например, функция может не узнать, что состояние обновилось, и продолжить работать со старым значением. Обновления происходят непредсказуемо, получит ли компонент верное значение — неизвестно.

Управление помогает сделать работу объекта логичной. Для этого существуют менеджеры состояния, или state managers. Их можно написать самому, но готовые решения удобнее и содержат больше полезных функций. Одно из таких решений — Redux.

Основные концепции

Redux базируется на трех принципах, из которых следует характер работы с ним.

Изменения — только через редукторы. Когда в состояние поступает действие, его обрабатывают редукторы, или редьюсеры (reducers). Это чистые функции — результат их выполнения зависит только от входных данных.

Редукторы берут объект состояния компонента, который изменился, и действие. На их основе они генерируют новый объект состояния. Функции всегда создают новый объект. Если действие сложное, а приложение большое, для него могут запуститься несколько редукторов.

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

Как устроено приложение с Redux

Управление состоянием с помощью Redux можно разделить на три компонента:

источник состояния;
интерфейс, созданный на основе актуального состояния;
функции-действия.

Источник состояния существует в определенном виде. На его основе строится интерфейс приложения. Когда происходят изменения, в источник состояния поступает действие и редукторы перезаписывают состояние. Источник состояния изменяется.

Затем он отправляет новые данные всем компонентам, которые настроены их получать. Так реализована зависимость интерфейса от источника. Компоненты получают информацию и, если нужно, перерисовывают интерфейс в соответствии с ней.

Таким образом за состоянием изменяется интерфейс, так как он зависит от источника. Приложение становится реактивным, то есть мгновенно реагирующим на изменения. Количество ошибок уменьшается, а поведение программы становится более предсказуемым.

Преимущества Redux

Легкая работа с состоянием. Redux реализован просто и элегантно, мало весит и при этом эффективно управляет состоянием. Его основную функциональность можно уместить в десять строчек кода. Пользоваться Redux удобнее, чем самостоятельно писать менеджер состояний.

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

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

Как начать работать с Redux

Redux можно скачать и установить с помощью пакетного менеджера для JS-разработчиков: npm или yarn. Для этого достаточно команды в консоли:

После этого необходимо создать в директории с приложением отдельную папку для хранения файлов, связанных с Redux. Внутри нее можно размещать файлы для хранения источника состояний, файлы с кодом редукторов и другие. Структура должна быть понятной.

Знакомимся с Redux на понятном языке. Минимальные требования для изучения − знание React. В этом материале разбираем принципы библиотеки.

Это руководство для новичков в мире Redux. Хотя, если вы просто хотите структурировать понимание фундаментальных концепций Redux, этот материал тоже будет полезен. В этой статье рассказываем, что такое Redux, и зачем его изучать. Если вы уже знаете основы и хотите что-нибудь потяжелее, можете присмотреть для себя книги по Redux.

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

Также проверка показала, что даже сертифицированный курс разработки React (который стоил в США больше 300 долларов) не помогает новичкам разобраться в полной мере.

Ну что, знакомимся с Redux на понятном языке?

Если вы когда-нибудь пробовали вникать в тему, то знаете, что Redux − ничто, по сравнению со связанными библиотеками, которые тоже следует знать: React-Redux, Redux-thunk, Redux-сага, Redux-обещание, Reselect, Recompose и куча других. У каждой из них свои особенности. Но в нашей статье представлен только базис, который позволит разобраться дальше самим. Не нужно сразу грузить себя сложными вещами.

Единственное, что вы уже должны знать к началу изучения темы − React. Если таких знаний пока нет, то хотя бы прочтите Pure React.

Несколько лет назад разработка интерфейсных приложений казалась чем-то несерьёзным. Теперь от таких приложений требуют большего, поэтому сложность разработки возросла. Это сравнимо с ситуацией, когда кот больше не помещается в обычную коробку, и теперь нужно сделать для него новое место жительства, а это требует больше усилий. Хотя все процессы так устроены: чем дальше и больше, тем сложнее.

Что такое Redux

Согласно документации, Redux − это предсказуемый контейнер состояния для JavaScript-приложений. Да, это звучит странно и непонятно. На самом деле суть Redux в том, чтобы приручить того самого кота из коробки, а точнее сделать так, чтобы приложения работали последовательно. Кроме этого, у него есть много других преимуществ, но об этом позже.

Зачем использовать Redux

Да, обычно сложно убедить кого-то использовать инструмент A вместо инструмента B, если они похожи. Каждый выбирает то, что ему больше нравится. Так и с Redux: разработчики и без него чувствуют себя нормально, на ранних этапах это точно не стоит траты времени.

Но когда приложение становится нагруженным, тогда стоит внедрить Redux в целях повышения производительности. А ещё Redux любят за то, что можно быстро изучить основы и выйти на рынок труда. Или за то, что здесь есть функции logging, hot reloading, time travel, universal apps, record и replay. Изучите, как они работают с помощью лекции.

Плюс статистика: 60% React-приложений используют Redux. В этом материале собрано ещё больше аргументов в пользу изучения Redux. Да и в конце концов, когда знания были лишними?

Как это работает в глазах пятилетнего ребёнка или разбираем принципы

Так как мы только знакомимся с Redux, ситуативные примеры тоже полезны. Допустим, вы идёте в банк снимать деньги. У вас есть единственная цель − снять деньги, а не что-то ещё. Вот она − WITHDRAW_MONEY.

Приходя в банк, человек направляется к кассиру (банкоматы не работают), чтобы сообщить о своём намерении снять деньги. Так, стоп. А почему нужно идти к кассиру, если деньги лежат в хранилище в соседней комнате? Почему нельзя просто забрать их оттуда?

Но в жизни, как и в Redux, это работает по-другому. Комната, где хранятся деньги, − это Redux Store, а state − часть денег в хранилище, которая принадлежит вам. Ваши Redux-приложения тоже хранятся в общем Redux Store. И это первый принцип Redux.

Состояние всего вашего приложения сохранено в дереве объектов внутри одного хранилища

Идя в банк, вы думаете о том, чтобы произвести какое-то действие − action. Если вы собираетесь снять деньги, то action − снятие денег. То же самое применимо к Redux. Напишите сколько угодно кода, но если вы захотите обновить состояние своего приложения Redux (как setState в React), вам нужно сообщить Redux об этом с помощью action.

Redux как гарант того, что с вашим счётом ничего незаконного не случится, потому что он постоянно проверяет состояние банковского счёта. Это второй принцип Redux.

Единственный способ изменить состояние − это применить действие − объект, который описывает, что случится

Кассир для банка − как reducer для Redux. В истории выше нужно было обязательно встретиться с кассиром, который имеет доступ к деньгам. То же самое с Redux: вам обязательно нужно сообщить, что вы хотите сделать. Если вы хотите обновить состояние вашего приложения, вы передадите ваш action в reducer. Вообще, это называется диспетчеризация.

reducer знает, что ему нужно делать. В этом примере он предпримет действие WITHDRAW_MONEY и обеспечит получение денег. В условиях Redux деньги, которые вы тратите, находятся в state. Когда reducer узнает что нужно что-то сделать, он вернёт вас в позицию new state.

Для определения того, как дерево состояния будет трансформировано действиями, вы пишете чистые редюсеры

Читайте также: