EventAggregator для React-компонентов
Сайтостроение | создано: 23.11.2019 | опубликовано: 23.11.2019 | обновлено: 13.01.2024 | просмотров: 1301
Демонстрация работы 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-канале к видео или в блоге через форму обратной связи.