EventrixScope

This provider give you opportunity to use event name scope or state path scope. This is great tool when you need to encapsulate some part of your application. Small example abowe.

Scopes doesn't work with receivers it will be added in future.

Javascript

import React from 'react';
import { useEventrixState, EventrixProvider, Eventrix, EventrixScope } from 'eventrix';

const eventrix = new Eventrix({
    company1: {
        employees:  [{ name: 'Max' }],
    },
    company2: {
        employees: [{ name: 'Jonhy' }],
    },
);

const EmployeeList = () => {
    const [employees] = useEventrixState('employees'); // `${scope}.employees`
    return (
        <div>
            {employees.map(employee => <div>{employee.name}</div>)}
        </div>
    );
}

const Dashboard = () => {
    return (
        <EventrixProvider eventrix={eventrix}>
            <EventrixScope state='company1'>
                <EmployeeList />
            </EventrixScope>
            <EventrixScope state='company2'>
                <EmployeeList />
            </EventrixScope>
        </EventrixProvider>
    )
}

The same thing you can do with event scope

Javascript

import React from 'react';
import { useEventrixState, EventrixProvider, Eventrix, EventrixScope } from 'eventrix';

const eventrix = new Eventrix({});
eventrix.listen('User:create', () => { console.log('create user') })
eventrix.listen('Employee:create', () => { console.log('create employee') })

const CreateButton = () => {
    const emit = useEmit(); // 
    const create = () => { emit('create', { name: 'test' }) } // `${scope}:create`
    return <Button onClick={create}>Create</Button>;
}

const Dashboard = () => {
    return (
        <EventrixProvider eventrix={eventrix}>
            <EventrixScope event='User'>
                <CreateButton />
            </EventrixScope>
            <EventrixScope event='Employee'>
                <CreateButton />
            </EventrixScope>
        </EventrixProvider>
    )
}