Nevertheless! Party Metaphorically

    react-event-aggregator

    1.0.6 • Public • Published

    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

    Install

    npm i react-event-aggregator

    DownloadsWeekly Downloads

    3

    Version

    1.0.6

    License

    ISC

    Unpacked Size

    9.4 kB

    Total Files

    3

    Last publish

    Collaborators

    • calabonga