EventAggregator для React-компонентов
Сайтостроение | создано: 23.11.2019 | опубликовано: 23.11.2019 | обновлено: 13.01.2024 | просмотров: 1323
Демонстрация работы npm-пакета, которые реализует паттерн "Издатель-Подписчик" для React-компонентов.
Описание
В этом видео речь пойдет о простой реализации паттерна PubSub (Издатель-Подписик) для обмена сообщениями между компонентами (модулями) в React-приложении. Будет показан пример работы npm-пакета react-event-aggregator.
npm-package
Пакет доступен по адресу https://www.npmjs.com/package/react-event-aggregator
Описание
EventAggregator - это реализация паттерна "Издатель-Подписчик". Простой способ создать обмен данными между компонентами в React-приложении. EventAggregator не требует сложных и замысловатых действий.
Установка
Для установки пакета выполните команду:
npm install react-event-aggregator
Использование
В EventAggregator два основных метода: publish и subscribe.
Компонент "Отправитель"
В компоненте, который должен отправлять сообщения, требуется импортировать EventAggregator:
import EventAggregator from "react-event-aggregator";
После этого достаточно указать название канала, например channel1
, и подставить объект, который вы хотите отправить. Все подписчики на этот канал, получат этот объект. Посмотрите как это сделано в методе sendMessage()
:
import React from "react"; import EventAggregator from "react-event-aggregator"; export class Sender extends React.Component { constructor(props) { super(props); this.state = { message: "Sender" } } sendMessage = () => { let message = `Message from semder ${new Date().toLocaleTimeString()}`; EventAggregator.publish("channel1", message); } render() { return ( <div> <p> {this.state.message} </p> <p> <button onClick={this.sendMessage}>Send message</button> </p> </div> ); } }
Компонент "Получатель"
В компоненте, который должен отправлять сообщения, также требуется импортировать EventAggregator
:
import EventAggregator from "react-event-aggregator";
Далее достаточно всего лишь подписаться на канал, чтобы получать от него сообщения (объекты). В конструкторе создается метод subscribe()
, в котором и осуществляется подписка на события канала channel1
:
import React from "react"; import EventAggregator from "react-event-aggregator"; export class ReceiverOne extends React.Component { constructor(props) { super(props); this.state = { message: "Empty" } this.subscribe(); } subscribe = () => { EventAggregator.subscribe("channel1", (channel, payload) => { this.setState({ message: payload }); }); } render() { return ( <div className="border"> <h3>Reveiver 1</h3> <p> {this.state.message} </p> </div> ); } }
Информация
Видео пример использования EventAggregator
можно найти на канале youtube. Вопросы и пожелания принимаются на youtube-канале к видео или в блоге через форму обратной связи.