LogoLogo
  • Eventrix
  • Introduction
    • Installation
    • Quick start
    • Getting started
    • Demo
    • About
  • Devtools - EventrixDebugger
  • Use cases
    • Handle errors
    • Simple form management
    • Communication between components
    • Next.js
    • Basic setup on project
    • Fetch list and display in component
  • CONTEXT
    • EventrixProvider
    • PersistStoreGate
    • EventrixScope
  • MIGRATION
    • Redux -> Eventrix
  • Receivers
    • EventsReceiver
    • RequestsHandler
    • fetchToStateReceiver
    • fetchStateReceiver
    • fetchHandler
  • HOC
    • withEventrix
    • withEventrixState
  • HOOKS
    • useEventrixState
    • useEmit
    • useEvent
    • useEventState
    • useFetchToState
    • useReceiver
    • useFetchState
  • CLASS DECORATORS
    • @useEventrix
    • @receiver
    • @fetchToState
    • @listener
  • COMPONENT DECORATORS
    • @eventrixComponent
    • @eventListener
    • @stateListener
    • @eventrixState
Powered by GitBook
On this page

Was this helpful?

  1. Receivers

EventsReceiver

Attribute name

Type

Description

eventNames

string | string[]

Event name or array of event names

receiver

(eventName: string, eventData: any, stateManager: StateManager):void | Promise<any>

This function will be called when one of required events will be called.

EventsReceiver can handle one or more events. Thats mean when You emit some event. Eventrix will invoked receiver when event name match to his events list.

import { EventsReceiver } from 'eventrix';

const removeUserReceiver = new EventsReceiver(
    'Users:remove.user',
    (eventName, eventData, stateManager) => {
        const usersList = stateManager.getState('users');
        const newUsersList = usersList.filter(user => user.id !== eventData.id);
        stateManager.setState('users', newUsersList);
    }
);

export default removeUserReceiver;
import { EventsReceiver } from 'eventrix';
import StateManager from 'eventrix/types/StateManager';
import { User } from '../interfaces';

interface RemoveUserEventData {
    id: number;
}

const removeUserReceiver = new EventsReceiver<RemoveUserEventData, void>(
    'Users:remove.user',
    (eventName, eventData, stateManager) => {
        const usersList = stateManager.getState<User[]>('users');
        const newUsersList = usersList.filter(user => user.id !== eventData.id);
        stateManager.setState<User[]>('users', newUsersList);
    }
);

export default removeUserReceiver;

You can also listen on list of events and check which event was emitted.

import { EventsReceiver } from 'eventrix';

const usersReceiver = new EventsReceiver(
    ['Users:add.user', 'Users:remove.user'],
    (eventName, eventData, stateManager) => {
        const usersList = stateManager.getState('users');
        if (eventName === 'Users:add.user') {
            stateManager.setState('users', [...usersList, eventData]);
        }
        if (eventName === 'Users:remove.user') {
            const newUsersList = usersList.filter(user => user.id !== eventData.id);
            stateManager.setState('users', newUsersList);
        }
    }
);

export default usersReceiver;
import { EventsReceiver } from 'eventrix';
import StateManager from 'eventrix/types/StateManager';
import { User } from '../interfaces';

interface RemoveUserEventData {
    id: number;
}

const removeUserReceiver = new EventsReceiver<RemoveUserEventData | User, void>(
    ['Users:add.user', 'Users:remove.user'],
    (eventName, eventData, stateManager): void => {
        const usersList = stateManager.getState<User[]>('users');
        if (eventName === 'Users:add.user') {
            stateManager.setState<User[]>('users', [...usersList, eventData]);
        }
        if (eventName === 'Users:remove.user') {
            const newUsersList = usersList.filter(user => user.id !== eventData.id);
            stateManager.setState<User[]>('users', newUsersList);
        }
    }
);

export default removeUserReceiver;

When You need handle some async action You can return Promise. If receiver return Promise then Eventrix wait for Promise resolve and You can handle state change when Promise resolved.

import { EventsReceiver } from 'eventrix';
import axios from 'axios';

const createUserReceiver = new EventsReceiver(
    'Users:create.user',
    (eventName, eventData, stateManager) => {
        return axios.post(`http://users.com/users`, eventData)
             .then((response) => {
                 const newUser = response.data;
                 const usersList = stateManager.getState('users');
                 stateManager.setState('users', [...usersList, newUser]);
             });
    }
);

export default createUserReceiver;
import { EventsReceiver } from 'eventrix';
import StateManager from 'eventrix/types/StateManager';
import { User } from '../interfaces';
import axios from 'axios';

const createUserReceiver = new EventsReceiver<User, Promise<User>>(
    'Users:create.user',
    (eventName, eventData, stateManager) => {
        return axios.post(`http://users.com/users`, eventData)
             .then((response: { data: User }): User => {
                 const newUser = response.data;
                 const usersList = stateManager.getState('users');
                 stateManager.setState('users', [...usersList, newUser]);
                 return newUser;
             });
    }
);

export default createUserReceiver;

Complete example how use EventsReceiver

import { EventsReceiver, Eventrix } from 'eventrix';

const initialState = {
    users: [],
};

const removeUserReceiver = new EventsReceiver(
    'Users:remove.user',
    (eventName, eventData, stateManager) => {
        const usersList = stateManager.getState('users');
        const newUsersList = usersList.filter(user => user.id !== eventData.id);
        stateManager.setState('users', newUsersList);
    }
);

const receivers = [removeUserReceiver];

const eventrix = new Eventrix(initialState, receivers);

export default eventrix;
import { EventsReceiver, Eventrix } from 'eventrix';
import StateManager from 'eventrix/types/StateManager';

interface User {
    id: number;
    name: string;
    age: number;
}

interface StoreState {
    usersList: User[];
}

const initialState = {
    users: [],
};

const removeUserReceiver = new EventsReceiver<User, void>(
    'Users:remove.user',
    (eventName, eventData, stateManager): void => {
        const usersList = stateManager.getState<User[]>('users');
        const newUsersList = usersList.filter(user => user.id !== eventData.id);
        stateManager.setState<User[]>('users', newUsersList);
    }
);

const receivers = [removeUserReceiver];

const eventrix = new Eventrix<StoreState>(initialState, receivers);

export default eventrix;

You can register EventsReceiver later by:

eventrix.useReceiver(createUserReceiver);

or remove receiver by:

eventrix.removeReceiver(createUserReceiver);

PreviousRedux -> EventrixNextRequestsHandler

Last updated 2 years ago

Was this helpful?