Редукс
В этой статье мы обсудим, что такое Redux в целом, зачем он нам нужен и когда его использовать. Затем мы увидим, как реализовать Redux в React.js.
Что такое Редукс?
До Redux управлять состоянием приложения было непросто, особенно в больших приложениях, когда многие компоненты имеют собственное состояние или должны получать данные от других компонентов, поэтому управление состоянием приложения было запутанным и неэффективным. Нам нужен был новый подход для лучшего управления состоянием приложения, и здесь родился Redux.
Так что же такое Редукс? Redux — это библиотека JavaScript для управления состоянием приложений в приложениях JavaScript. В Redux у нас есть объект, обычно называемый store, и он хранит состояние приложения. Магазин доступен из любого компонента нашего проекта, что делает наше состояние гибким и не тесно связанным. Теперь это очень мощно, потому что каждый компонент теперь имеет прямой доступ к состоянию.
На следующем изображении показан магазин Redux (справа) и компоненты приложения (слева). Мы видим, что наше состояние полностью отделено от компонентов приложения и доступно из любого компонента.
Редукс терминология
Теперь посмотрим, из чего сделан Redux:
- Магазин. Как мы уже знаем, это объект, который содержит состояние приложения и доступен из любого компонента нашего проекта.
- Тип:строковое представление функции, которую вы хотите выполнить.
- Действие: функция, которая создает объект с двумя полями; один тип, который мы уже обсуждали, а второй — полезная нагрузка (данные).
- Отправка: функция, которая принимает действие в качестве параметра и вызывает событие, которое в конечном итоге изменяет состояние.
- Reducer: последний шаг цикла Redux можно разделить на два: начальное состояние объекта как объекта, а второй отвечает за изменение состояния объекта в зависимости от типа действия, и, наконец, обновление магазина.
Реализация
Все эти термины могут быть перегружены, поэтому мы рассмотрим эти термины с кодом, чтобы увидеть, как все делается. Прежде чем мы продолжим, загрузите эти пакеты npm:
- нпм я редукс
- npm я реагирую-редукс
Структура папок Redux:
- Компоненты. Обычные компоненты проекта.
- Redux: основная папка, содержащая все данные Redux для приложения.
- Функции: Сущности приложения (cake и iceCream), в каждой сущности у нас будет файл уток, который будет содержать тип , действие и редуктор.
- RootReducer: для управления несколькими редьюсерами.
- Магазин: создание магазина и подключение к приложению.
Как выглядит файл утки?
Теперь мы рассмотрим файл уток торта в качестве примера для всех остальных файлов утки:
Как выглядит файл rootReducer?
Как выглядит файл магазина?
Как состояние поступает в компоненты?
Как захватить состояние в компонентах?
Пайплайн Redux
До сих пор мы прошли через довольно много вещей, и мы очень близки к концу; осталось понять порядок событий в конвейере Redux, и для этого я буду использовать изображение, чтобы проиллюстрировать порядок событий в конвейере Redux.
Когда мы отправляем действие, мы говорим: «Эй, магазин, мы хотим манипулировать вашими данными, это действие, которое мы хотим, чтобы вы выполнили». Магазин получает запрос и говорит: «Нет проблем. Я передам ваш запрос редуктору. Редуктор получает запрос и в зависимости от типа действия выполняет функцию. Когда функция будет выполнена, редюсер уведомит хранилище и передаст новое состояние в хранилище, а из хранилища — в наши компоненты.
Когда использовать Redux?
Мы будем использовать Redux, когда у нас будет большое приложение с множеством компонентов, передающих данные от одного к другому.
Вот и все; теперь вы должны чувствовать себя комфортно с Redux. Большое спасибо за прочтение этой истории, увидимся в следующей.