EventAggregator для React

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

Лицензия

ISC © Calabonga SOFT

EventAggregator for React

EventAggregator - implementation of pattern "Publisher-Subscruber" (or PubSub). This is a simple way to organize communications between components in the React-application.

Installation

First, you should intall npm-package to your application:

npm install react-event-aggregator

Usage

EventAggregator contains two methods: publish and subscribe.

Component "Publisher"

In the component that should send notifications (messages), need to import EventAggregator:

import EventAggregator from "react-event-aggregator";

After install you can set the channel name (for example channel) and then send message (or other objects) to your channel. Please look at the method 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>
        );
    }
}

Component "Subscriber"

Import the EventAggregator to your second component:

import EventAggregator from "react-event-aggregator";

Now, you can subscribe to channel1 then you can receive all messages (objects) from it. Look at the method subscribe() in the constructor:

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>
        );
    }
}

Information

Example for EventAggregator you can find on youtube. Question you can ask on the blog by feedback form.

Licence

ISC © Calabonga SOFT