Обмен данными между компонентами React с помощью RxJS

В этом посте мы погрузимся в чудесный мир RxJS.

Появление RxJS открыло много возможностей в мире JS. Его цель - достичь очень многих с помощью небольшого кода. В этом посте мы узнаем, как обмениваться данными между компонентами в приложении React, используя мощь RxJS.

Совет: используйте Bit для систематизации компонентов React и обмена ими. Делитесь компонентами, которые ваша команда может использовать и развивать во всех ваших приложениях, а также быстрее создавать вместе. Попробуйте сами.

Redux

Обмен данными между несвязанными компонентами React был основной целью библиотек управления состоянием. Существует множество реализаций управления состоянием, но самые популярные из них:

Поток
Redux

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

С Redux мы создаем центральное хранилище данных -

затем мы подключаем компоненты к хранилищу данных и обновляем и удаляем состояние по желанию. Любые изменения, внесенные в магазин, будут отражены во всех компонентах, подключенных к магазину; Таким образом, данные могут передаваться компонентам, независимо от того, насколько глубоко они вложены. Компонент n-го уровня в дереве может передавать данные самому верхнему компоненту, а самый верхний компонент может передавать данные компоненту 21 уровня.

RxJS

С RxJS все стрессы и путаница, связанные с использованием библиотек управления состоянием, заканчиваются. Нам нравится паттерн Observer, который предлагает нам RxJS.

Мы просто создаем поток Observable и позволяем всем компонентам прослушивать поток, если какой-либо компонент добавляет к потоку, что компоненты прослушивания или подписки отвечают на обновление их DOM.

Настройка

Создайте приложение React, используя create-react-app. Если сначала у вас нет create-react-app, установите его глобально:

npm i create-react-app -g

Затем создайте проект React:

create-react-app react-prj

Перейти в каталог:

cd react-prj

Устанавливаем библиотеку rxjs:

npm i rxjs

У нас будет файл, который инстанцирует новый объект BehaviorSubject.

Зачем использовать BehaviorSubject? BehaviorSubject - это тип Subject в RxJS, в качестве дочернего Subject он позволяет нескольким наблюдателям прослушивать поток и события, многоадресные для наблюдателей, BehaviorSubject сохраняет последнее значение и передает его любому новому подписчики.

Разрешает многоадресную рассылку
Сохраняет и передает последнее значение, отправленное подписчиками.

У нас есть файл messageService.js, расположенный в папке src. Он экспортирует подписчику экземпляр BehaviorSubject и объект messageService. Объект подписчика создается в начале файла, чтобы быть доступным для любого импортирующего компонента. Объект messageService имеет функцию отправки, которая принимает параметр msg, который содержит данные, которые нам нужны для широковещательной рассылки всех компонентов прослушивания, в теле функции мы вызываем метод emit в объекте подписчика, он выполняет многоадресную рассылку данных подписывающимся компонентам.

Допустим, у нас есть компоненты:

ConsumerA
ConsumerB
Продюсер
ПродюсерB

С древовидной иерархией:

Компонент приложения отображает ProducerA и ConsumerB, ProducerA отображает ConsumerA, а ConsumerB отображает ProducerB.

Компоненты ConsumerA и ConsumerB сохраняют индивидуальный счетчик состояний. В своем componentDidMount они подписываются на один и тот же поток subscriber, каждый раз, когда публикуется событие, они оба обновляют счетчик. У ProducerA и ProducerB есть кнопки Increment Counter и Decrement Counter, при нажатии они излучают 1 или -1. Подписывающиеся компоненты ConsumerA и ConsumerB принимают событие и запускают свои функции обратного вызова, тем самым обновляя значение своего счетчика состояния и DOM.

Снова посмотрим на дерево компонентов:

ProducerB мог передавать данные в ConsumerA, но они никак не связаны друг с другом, а ProducerA мог передавать данные в ConsumerB, несмотря на то, что он не был его родительским. В этом сила RxJS, мы просто создали центральный концентратор потока событий и позволили компонентам прослушивать его, где бы ни один компонент не испускал события, они улавливаются компонентами прослушивания.

Вы можете играть с приложением на stackblitz: https://react-lwzp6e.stackblitz.io

Заключение

В этом посте мы увидели, как мы можем обмениваться данными между компонентами React с помощью RxJS. Мы использовали наблюдаемый объект BehaviorSubject, чтобы создать центральный поток и позволить другим компонентам подписаться на него. Эти компоненты будут получать данные при передаче любым компонентом, независимо от уровня его иерархии в дереве компонентов.

Если у вас есть какие-либо вопросы относительно этого или чего-либо, что я должен добавить, исправить или удалить, не стесняйтесь комментировать, писать мне по электронной почте или в прямом сообщении.

Спасибо !!!