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

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.

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

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>
    )
}
PreviousPersistStoreGateNextRedux -> Eventrix

Last updated 2 years ago

Was this helpful?