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

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;

PreviousInstallationNextGetting started

Last updated 3 years ago

Was this helpful?