EventAggregator для React-компонентов

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

Поблагодарить

• Пожертвовать через boosty.to 
• Стать спонсором 

Хотите тоже получать донаты? Тогда заходите на boosty.to и регистрируйтесь!

Кстати, я использую хостинг reg.ru. Подключайся с промокодом 9A17-953A-8591-CF98 чтобы получить скидку 5%

Мои видео

Boosty.to | YouTube | Yandex.Дзен | RuTube | VK Video