Home

Awesome

Eventrix

STATE MANAGMENT FOR REACT AND REACT NATIVE APPS

Build Status npm npm

Support

Installation

$ npm install eventrix --save

Documentation

Get started | API | Migration from Redux | Demo

Home page

We have website dedicated to eventrix. Go to eventrix.io and see what eventrix has to offer.

Quickstart

eventrixStore.js

import { Eventrix } from 'eventrix';
import receiversList from './receivers';

const initialState = {
    users: [],
};

const eventrixStore = new Eventrix(initialState, receiversList);
export default eventrixStore;

App.jsx

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { EventrixProvider } from 'eventrix';
import eventrixStore from './eventrixStore';

const rootElement = document.getElementById("root");
ReactDOM.render(
    <StrictMode>
      <EventrixProvider eventrix={eventrixStore}>
        <UsersList />
      </EventrixProvider>
    </StrictMode>,
    rootElement
);

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

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((response) => {
        const usersList = response.data;
        stateManager.setState('users', usersList);
    });
});

const receiversList = [fetchUsersReceiver];

export default receiversList;

About

Eventrix is a scaling and predictable JS library for state managing and centralizing application global state.

Eventrix solves the problem of sharing information between elements of the application, as well as communication between them. This open source library is suitable for both very large and small applications. Eventrix enables flexible expansion of the global state as well as enables greater control over the data flow in the application.

If you need to manage a state that is shared between services and components in an app, Eventrix is the best solution available. Similar to a message broker for fronted with an addition allowing to manage the global states, it also enables these elements to communicate through events.

The biggest advantages to REDUX TOOLKIT are:

Check it yourself using those tools:

Video of how it works and a performance comparison: React REDUX vs Eventrix performance test

Greater control of data flow thanks to additional tools (devtools) and a small threshold of entry (small amount of code to write): Eventrix DevTools

Contribute

License

eventrix package are MIT licensed

Powered by

RST Software Masters look on RST Github