Search…
⌃K

Quick start

Create eventrix store
/eventrix/index.js
import { Eventrix } from 'eventrix';
import receiversList from './receivers';
const initialState = {
users: [],
};
const eventrixStore = new Eventrix(initialState, receiversList);
export default eventrixStore;
Use EventrixProvider in main component of your app.
/App.jsx
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { EventrixProvider } from 'eventrix';
import eventrixStore from './eventrix';
import UsersList from './components/UsersList';
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<EventrixProvider eventrix={eventrixStore}>
<UsersList />
</EventrixProvider>
</StrictMode>,
rootElement
);
Use users state in users list component and emit event to fetch users.
/components/UsersList.jsx
import React, { useCallback } from 'react';
import { useEventrixState, useEmit } from 'eventrix';
const UsersList = () => {
const [users] = useEventrixState('users');
const emit = useEmit();
const fetchUsers = useCallback(() => {
emit('fetchUsers');
}, [emit]);
return (
<div>
<button onClick={fetchUsers}></button>
<div>
{users.map(user => <div key={user.id}>{user.name} {user.surname}</div>)}
</div>
</div>
)
}
Create receiver that will be fetch users list.
/eventrix/receivers.js
import axios from 'axios';
import { EventsReceiver } from 'eventrix';
const fetchUsersReceiver = new EventsReceiver('fetchUsers', (eventName, eventData, stateManager) => {
return axios.get('https://myDomain.com/users').then(({ data: usersList }) => {
stateManager.setState('users', usersList);
});
});
const receiversList = [fetchUsersReceiver];
export default receiversList;