Я предполагаю, что вы уже знакомы с JavaScript, React и ES6 до начала этого урока. Я настоятельно рекомендую всем, кто не знаком с какой-либо из этих тем или идей, пройти обучение, основанное на них.

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

Хотя React использует его в основном как инструмент управления состоянием, вы можете использовать его с любой другой инфраструктурой или библиотекой JavaScript.

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

Причины использовать Redux:

  • Для доступа нескольких компонентов требуется одно и то же состояние приложения.Например, информация о пользователе должна обмениваться между различными компонентами, которые могут не взаимодействовать сразу после того, как пользователь войдет в личную учетную запись в приложении. . Единое хранилище Redux — это эффективный метод сопоставления состояния между компонентами в этой ситуации.
  • Когда вы и другие члены команды совместно работаете над крупным приложением — опять же, по мере роста сложности приложения единое хранилище Redux становится более выгодным. Redux также может помочь держать всех на одной странице, если над ней работает много людей (и у вас нет альтернативной системы для обмена информацией).
  • когда состояние приложения часто обновляется —это часто подразумевает приложения, ориентированные на потребителя, где происходит много взаимодействия с пользователем (например, добавление товаров в корзину, затем удаление некоторых, прохождение процесса оплаты , и т. д).

Давайте посмотрим на плюсы и минусы использования Redux:

Плюсы

  • повышает предсказуемость состояния
  • Это очень ремонтопригодно
  • Он останавливает повторный рендеринг
  • Производительность оптимизирована Redux
  • обеспечивает простоту тестирования
  • полезно для рендеринга на стороне сервера
  • Облегчает отладку

Минусы-

  • Кропотливый
  • Повышенная сложность
  • Чрезмерное использование памяти
  • Отсутствие инкапсуляции
  • Ограниченный дизайн

Redux чаще всего используется для проектов React, хотя его также можно использовать с другими библиотеками JavaScript, такими как Angular или Vue.js.

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

Рассмотрим программу, в которой есть функции «Пользователи» и «Продукты».

Реализация аутентификации пользователей позволяет пользователям регистрироваться, входить в систему и просматривать панель мониторинга только после успешной аутентификации. Поскольку доступ к действиям «Корзина» возможен только тогда, когда пользователь вошел в систему и прошел проверку подлинности, другим функциям «Продукты» также требуется информация для проверки подлинности пользователя. Многие состояния и свойства должны быть переданы из компонента «Пользователи» в другую область приложения, называемую «Продукты», чтобы получить информацию об аутентификации пользователя на этом этапе. На этом этапе Redux вступает в дело, предлагая центральное хранилище (в котором хранится все состояние приложения), которое затем становится доступным для всего приложения.