Если вы фронтенд-разработчик, возможно, вы слышали о Redux. Если вы не являетесь фронтенд-разработчиком или не слышали о Redux, эта статья все равно расскажет вам о классной технологии, которую используют ваши коллеги-фронтенд-инженеры.
Новые разработчики React изучают все основы React, но часто боятся погружаться в Redux. Причиной этого в основном является запутанная терминология, которую Redux приносит с собой, а также более крутая кривая обучения, чем традиционные библиотеки и фреймворки JavaScript. Эта статья призвана прояснить ситуацию, объясняя жаргон Redux на реальном примере.
Что такое Редукс?
Во-первых, Redux не связан с React. Его можно использовать с ванильным JavaScript, Vue, Angular и другими модными JS-фреймворками. React-Redux, с другой стороны, представляет собой специальный пакет React, который упрощает работу с Redux в приложениях React. Поэтому, благодаря популярности React и моему личному опыту работы с ним, в этой статье мы будем говорить о Redux с точки зрения React. Однако общие понятия и терминология остаются схожими.
Итак, что такое Редукс?
Redux — это библиотека управления состоянием для приложений JavaScript.
Хорошо? Что это вообще значит?
Каждое веб-приложение, которое вы видите, имеет неотъемлемое состояние или набор свойств, которые различаются между пользователями и могут зависеть от взаимодействия с пользователем.
Когда вы посещаете Amazon, состояние приложения содержит сведения о вошедшем в систему пользователе, о товарах в вашей корзине, о том, открыто ли модальное окно и т. д. Эта информация используется и может обновляться из разных мест на протяжении всего процесса. приложение. Например, вы можете добавлять товары в корзину со страницы товаров и удалять их со страницы корзины.
Redux отвечает за хранение этих фрагментов информации, чтобы соответствующие компоненты приложения могли получить к ним доступ в любое время.
Почему Редукс?
Если вы использовали React, то знаете, что у каждого компонента есть свое состояние. Так зачем использовать Redux, если мы можем напрямую управлять состоянием компонента?
Допустим, у вас есть приложение React с несколькими компонентами, вложенными друг в друга. Компонент D должен отображать имя пользователя, поэтому у него есть переменная состояния со значением «Apoorva».
После того, как мы разработаем еще несколько функций, мы обнаружим, что компонент E также требует отображения имени. Используя логику React, мы поднимаем переменную и сохраняем ее в родительском компоненте B, который затем может передать ее своим дочерним элементам (D,E).
После еще некоторого развития мы обнаруживаем, что компонент G также требует имя пользователя. Следуя нашей логике, мы поднимаем переменную и сохраняем ее в наименьшем общем предке дочерних компонентов (в нашем случае A).
Мы видим очевидные проблемы с этим подходом.
- Представьте, что вы делаете это с несколькими свойствами на разных уровнях вложенности. Это становится очень запутанной и утомительной задачей для разработчика, а также снижает читабельность кода.
- Компоненты B и C, которые не используют эту переменную, также должны хранить ее значение только потому, что оно нужно их дочерним элементам.
Таким образом, Redux приходит нам на помощь, предоставляя нам внешнюю ссылку на состояние приложения, которое может быть запрошено любым компонентом, которому требуется переменная состояния.
Redux может показаться базой данных, поскольку он имеет аналогичную функциональность, но Redux несет полную ответственность за хранение данных в памяти для отображения в приложении. Запрос той же информации к базе данных является избыточной и трудоемкой задачей.
Кроме того, некоторым из вас может быть интересно, могут ли хуки UseContext и UseReducer в React выполнять ту же работу. Это верно. Однако Redux был разработан до этих хуков и поэтому использовался дольше. Помимо того, что он не зависит от фреймворка, он по-прежнему является рекомендуемым способом обработки состояния приложения в больших масштабах.
Редукс терминологии
Redux имеет 3 ключевых термина:
Магазин, действия и редукторы.
Эти термины соответствуют трем принципам Redux, если ни один из них не имеет смысла, поверьте мне и продолжайте читать. :
- Состояние приложения хранится в дереве объектов с одним хранилищем.
- Единственный способ изменить хранилище — создать действие, которое представляет собой объект, описывающий, что должно произойти.
- Чтобы указать, как трансформируется дерево состояний, нам нужно написать редукторы, которые принимают начальное состояние и действие в качестве входных данных и возвращают новое состояние.
Допустим, вы получили свою первую зарплату и хотите купить новый ноутбук.
Вы идете в магазин ноутбуков и говорите продавцу, что хотите купить ноутбук.
Магазин здесь — это наше приложение JavaScript, а полка — это состояние приложения (Redux Store). Допустим, полка используется для отслеживания количества ноутбуков в магазине вместе с их данными. Эта информация является состоянием нашего приложения.
Вы говорите продавцу, что вам нужно купить ноутбук, — это Redux Действие. Оно указывает, как нужно изменить магазин Redux. (Уменьшить количество ноутбуков на 1)
Продавец проверяет, есть ли данная модель на полке или нет.
Владелец магазина — это Redux Reducer.
ТОЛЬКО владелец магазина может получить доступ к полке и изменить ее содержимое. То есть ТОЛЬКО редюсер может управлять хранилищем Redux. Вы не можете напрямую изменить содержимое магазина Redux.
Конечно, вы можете перепрыгнуть через прилавок и забрать ноутбук самостоятельно, оставив немного денег, но это не рекомендуется и не является общепринятой практикой, если только вы не хотите уголовных обвинений XD
Допустим, через несколько дней вы понимаете, что ноутбуку нужно больше оперативной памяти, поэтому вы возвращаетесь в магазин, чтобы обновить его. Пока вы там, вы понимаете, что вам тоже нужен телефон, поэтому вы идете к другому продавцу на телефонной стойке и покупаете нужный вам телефон.
В магазине мог бы быть один продавец, который обслуживал бы и ноутбуки, и телефоны, но с этим стало бы трудно справиться, когда магазин начал продавать больше товаров. Таким образом, для изменения состояния одного и того же хранилища Redux можно использовать несколько редьюсеров, поскольку использование одного редьюсера сложно масштабировать. Сигнатура функции для редукторов приведена ниже:
Обратите внимание, что функции внутри кейсов в идеале должны быть реализованы внутри самого кейса, а не вызываться. Здесь они абстрагированы для краткости.
Итак, если вы фронтенд-разработчик, надеюсь, теперь вы видите, что, несмотря на крутую начальную кривую обучения, как только вы ее преодолеете, Redux сделает вашу разработку более гладкой, организованной и эффективной.
Я бы очень рекомендовал потренироваться, внедрив Redux в простое приложение вроде пресловутого «Списка дел», потому что сколько бы статей вы ни прочитали, если не будете лезть в рутину, то ничего не узнаете.
