Редукс

В этой статье мы обсудим, что такое Redux в целом, зачем он нам нужен и когда его использовать. Затем мы увидим, как реализовать Redux в React.js.

Что такое Редукс?

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

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

На следующем изображении показан магазин Redux (справа) и компоненты приложения (слева). Мы видим, что наше состояние полностью отделено от компонентов приложения и доступно из любого компонента.

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

Теперь посмотрим, из чего сделан Redux:

  1. Магазин. Как мы уже знаем, это объект, который содержит состояние приложения и доступен из любого компонента нашего проекта.
  2. Тип:строковое представление функции, которую вы хотите выполнить.
  3. Действие: функция, которая создает объект с двумя полями; один тип, который мы уже обсуждали, а второй — полезная нагрузка (данные).
  4. Отправка: функция, которая принимает действие в качестве параметра и вызывает событие, которое в конечном итоге изменяет состояние.
  5. Reducer: последний шаг цикла Redux можно разделить на два: начальное состояние объекта как объекта, а второй отвечает за изменение состояния объекта в зависимости от типа действия, и, наконец, обновление магазина.

Реализация

Все эти термины могут быть перегружены, поэтому мы рассмотрим эти термины с кодом, чтобы увидеть, как все делается. Прежде чем мы продолжим, загрузите эти пакеты npm:

  1. нпм я редукс
  2. npm я реагирую-редукс

Структура папок Redux:

  1. Компоненты. Обычные компоненты проекта.
  2. Redux: основная папка, содержащая все данные Redux для приложения.
  3. Функции: Сущности приложения (cake и iceCream), в каждой сущности у нас будет файл уток, который будет содержать тип , действие и редуктор.
  4. RootReducer: для управления несколькими редьюсерами.
  5. Магазин: создание магазина и подключение к приложению.

Как выглядит файл утки?

Теперь мы рассмотрим файл уток торта в качестве примера для всех остальных файлов утки:

Как выглядит файл rootReducer?

Как выглядит файл магазина?

Как состояние поступает в компоненты?

Как захватить состояние в компонентах?

Пайплайн Redux

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

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

Когда использовать Redux?

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

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