Создание Redux
Прежде чем перейти к техническим деталям Redux, давайте сначала взглянем на то, что привело к созданию Redux, чтобы мы могли понять, как и где именно мы можем использовать возможности Redux в наших приложениях.
С постоянно растущим спросом на одностраничные приложения, основанные на JS-фреймворках, также возрастает сложность. Говоря о сложности, я хочу указать на сложность на обоих уровнях, то есть бизнес-требования и интерфейс пользовательского интерфейса. Таким образом, необходимость эффективного управления "государством" стала актуальнее, чем когда-либо. Состояние представляет каждую часть данных, которые изменяются в приложении. Он состоит из неизменяемых объектов, т.е. нам нужно создать новый экземпляр, скопировав существующее значение и добавив новое значение, если мы хотим, чтобы состояние изменилось. Как сказано в руководстве React о преимуществах неизменяемости:
«Неизменяемость делает отслеживание изменений дешевым. Изменение всегда приводит к созданию нового объекта, поэтому нам нужно только проверить, изменилась ли ссылка на объект ».
Состояние может включать в себя все, что угодно, от ответов сервера и кэшированных данных до локально созданных данных или даже состояния пользовательского интерфейса. Теперь управление этим состоянием может стать сложным, и здесь вам в помощь приходит «Redux».
Что такое Redux?
Как упоминалось в руководстве Redux, Redux - это контейнер с предсказуемым состоянием для приложений JavaScript. Redux следует трем фундаментальным принципам:
1. Единый источник истины
Он поддерживает состояние приложения в дереве объектов JS и хранит в одном хранилище. Например, следующее может быть способом сохранения состояния:
Состояние приложения будет универсальным, и, если оно будет получено в любой момент, должно предоставить согласованные значения. Это упрощает отладку, а благодаря постоянству состояния цикл разработки ускоряется.
2. Состояние доступно только для чтения
Это гарантирует, что состояние приложения не уязвимо. Его нельзя изменить напрямую. Изменения состояния будут выполняться посредством намерения посредством отправки «действия» и будут приниматься упорядоченным образом.
3. Изменения вносятся с использованием чистых функций.
Чистая функция - это функция, в которой возвращаемое значение определяется только входными значениями без наблюдаемых побочных эффектов. Для каждого конкретного действия мы сопоставляем «редуктор», который, в свою очередь, будет чистой функцией, и выполняем изменение состояния в зависимости от полезной нагрузки, которую он получает вместе с действием.
ПРИМЕЧАНИЕ. Состояние никогда не изменяется, всегда возвращается новый объект состояния.
Столпы Redux
Ниже приведены три столпа, на которых работает Redux:
Магазин
Хранилище объединяет состояние приложения в единый объект, действуя как база данных для веб-приложений. Хранилище разбито на различные состояния, которые представляют соответствующие типы данных в приложениях. Поскольку состояние приложения неизменяемо, изменение состояния ограничено и централизовано. У магазина есть определенные обязанности, такие как:
1. Сохранение состояния приложения
2. Доступ к государству
3. Разрешить обновление состояния
4. Работа со слушателями
Действия
Действия представляют собой полезные данные, которые отправляются из приложения в магазин и обычно запускаются взаимодействием с пользователем. Они служат для магазина единственным источником информации. Обычное представление действия будет примерно таким:
Основываясь на различных типах действий, взаимодействия пользователя сопоставляются с конкретными редукторами, которые выполняют операции изменения состояния.
Редукторы
Если хранилище похоже на базу данных для приложения, редукторы действуют как таблицы. Редуктор - это чистая функция, которая определяет, как конкретная часть состояния будет изменяться при отправке действия. Он принимает 2 аргумента, то есть предыдущее состояние и действие, и возвращает следующее состояние. Его можно представить так, как показано ниже:
ПРИМЕЧАНИЕ: используя операторы распространения JS, мы возвращаем новый объект состояния вместо изменения предыдущего.
Резюме
Когда действие отправляется, редуктор принимает его, применяет полезные данные в зависимости от типа действия и выводит новое состояние.
Прокрутите вверху и посмотрите на диаграмму, которая показывает, как различные столпы состояния связаны друг с другом и расширяют возможности одностраничного приложения.
Примечание. Я хотел бы поблагодарить Chirpy_me за столь впечатляющее изображение рабочего процесса redux. Ниже приводится ссылка на ее статью о Redux Saga:
