Eventrix is events and state management system which gives you tools to connect your UI with JS bussines logic. Component can send events to another components or JS bussines logic which give you posibility to send some XHR to get data from server. Eventrix also give you posibility to store some data in eventrix state. You can share this state with Your components and JS bussines logic part.
Events management
Eventrix class instance is something like store in Redux but not the same.
Eventrix class receive initial state and events receivers to handle events and to do someting with event data. Eventrix instance has events managament system and state manager inside. When You emit some event by
eventrix.emit('createUserEventName', userData)
then all listeners and events receivers that listen on it will be invoked.
/eventrix/index.js
constcreateUserListener= (userData) => { // do something with userData };eventrix.listen('createUserEventName', createUserListener);eventrix.emit('createUserEventName', { name:'Max' });// after call emit createUserListener will be called with { name: 'Max' } as userData
State management
Now we know how to listen on events and emit events. But what about state? Where is it? If we want to change state, we need to use events receiver
If you use EventsReceiver in eventrix instance, it will get access to stateManager when event will be called. State manager can set new state or get any state which you need.
Eventrix has one default events receiver on event setState. When you emit this event with
{ stateName:'users', value: [{ name:'Max' }] }
it will set state users to
[{ name:'Max' }]
eventrix.emit('setState', { stateName:'users', value: [{ name:'Max' }] });// after call emit stateManager will set new value to state `users`
Fetch with Eventrix
If you want to use fetch or axios with eventrix you can do this with EventsReceiver and emit
import { EventsReceiver } from'eventrix';import axios from'axios';constfetchReceiver=newEventsReceiver('fetchUsers', (eventName, eventData, stateManager) => {returnaxios.get('https://somedomain.com/users', { params: eventData }).then(({ data: users }) => {stateManager.setState('users', users);eventrix.emit('fetchUsers.success', users); }).catch((error) => {stateManager.setState('users', []);eventrix.emit('fetchUsers.error', error); });});eventrix.useReceiver(fetchReceiver);eventrix.emit('fetchUsers', { search:'johny' });// after emit event a `fetchUsers` the `fetchReceiver` will get users data from server and put it to `users` state
When you want to fetch some data and put it to state, you can also use special helper function called fetchToStateReceiver
You can handle error using catch on promise as we do in fetch with eventrix section or use fetchHandler. Fetch handler is small midlerware for fetch method that emit events when fetch success or fetch error.
If you want create event data basing on response, error, or receiver event data you can use getData attribute on success and error.
{ success: { eventName:'fetchUsers.success', getData: (response, eventData) =>`Users list loaded with resoults for "${eventData.search}"`, }, error: { eventName:'fetchUsers.failed', getData: (error, eventData) =>`Users list load failed when search "${eventData.search}"`, },}
React
Now we know how to send events, manage state and send requests to server with Eventrix. What about React and components? Eventrix has react section which gives us react context, provider, hocs and hooks.
import {useEventrixState,// get and set state similar to react but from eventrix storeuseEmit,// emit eventsuseEvent,// register event listenersuseEventState,// cache events and store last one in stateuseFetchToState // save request response in eventrix state} from'eventrix';
HOCs
import {withEventrixState,// get state from store to withEventrix,} from'eventrix';
If you want to use Eventrix in Your react project you must use EventrixProvider on the top of the project components tree.
Eventrix gives us special react hooks for state and events management. For example if You want to rerender component when some state will be changed, you can use useEventrixState hook.
useEventrixState hook also give you posibility to update used state. This hook is similar to useState but don’t have initial value. Remember, this is eventrix state and you can share this state with other component in Your app.