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