# 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.

{% tabs %}
{% tab title="Javascript" %}

```jsx
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;
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
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;
```

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Javascript" %}

```javascript
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;
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
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;
```

{% endtab %}
{% endtabs %}

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.

{% tabs %}
{% tab title="Javascript" %}

```javascript
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;
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
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;
```

{% endtab %}
{% endtabs %}

#### Complete example how use EventsReceiver

{% tabs %}
{% tab title="Javascript" %}

```javascript
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;
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
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;
```

{% endtab %}
{% endtabs %}

You can register EventsReceiver later by:

`eventrix.useReceiver(createUserReceiver);`&#x20;

or remove receiver by:

`eventrix.removeReceiver(createUserReceiver);`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eventrix.gitbook.io/eventrix/receivers/eventsreceiver.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.