Redux -> Eventrix

This section provides information on how to transition from Redux to Eventrix

The transition from redux to eventrix is ​​not that hard. Some things are named differently, but they work similarly. The following examples show what the code looks like using Redux and Eventrix.

Store

Initializing store and core elements is almost the same. Eventrix doesn't need middlewares unlike redux. Eventrix can handle asynchronous actions itself.

Redux

store.js

import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk'
import reducers from "./reducers";

export default createStore(reducers, applyMiddleware(thunk));

Eventrix

store.js

import { Eventrix } from "eventrix";
import receivers from "./receivers";

const initialState = {};
export default new Eventrix(initialState, receivers);

Reducer

Instead of the reducer in eventrix, it is receiver. It differs significantly from the reducer. Receiver is responsible for receiving the event and has the ability to modify the state using stateManager. StateManager has access to the entire state, so it can download and modify any state. If you need to get some data from API, you can do it in receiver and return promise.

Redux

reducers.js

import { combineReducers } from "redux";

const counter = (state = [], action) => {
    switch (action.type) {
        case `increaseCounter`:
            return counter + 1;
        case `reduceCounter`:
            return counter - 1;
        default:
            return state;
    }
};

export default combineReducers({ counter });

Eventrix

receivers.js

import { EventsReceiver } from "eventrix";

const counterReceiver = new EventsReceiver(
    ['increaseCounter', 'reduceCounter'],
    (eventName, eventData, stateManager) => {
        const counter = stateManager.getState('counter');
        if (eventName === 'increaseCounter') {
            return stateManager.setState('counter', counter + 1);
        }
        stateManager.setState('counter', counter - 1);
    }
);

export default [counterReceiver];

Eventrix (good practices)

receivers.js

import { EventsReceiver } from "eventrix";

const increaseCounterReceiver = new EventsReceiver(
    'increaseCounter',
    (eventName, eventData, stateManager) => {
        const counter = stateManager.getState('counter');
        stateManager.setState('counter', counter + 1);
    }
);

const reduceCounterReceiver = new EventsReceiver(
    'reduceCounter',
    (eventName, eventData, stateManager) => {
        const counter = stateManager.getState('counter');
        stateManager.setState('counter', counter - 1);
    }
);

export default [increaseCounterReceiver, reduceCounterReceiver];

Eventrix - async

receivers.js

import axios from 'axios';
import { EventsReceiver } from "eventrix";

const fetchCounterReceiver = new EventsReceiver(
    'fetchCounter',
    (eventName, eventData, stateManager) => {
        const { counterId } = eventData; 
        return axios.get(`https://someApi.com/counter/${counterId}`).then(({ data }) => {
            stateManager.setState('counter', data);
        });
    }
);

export default [fetchCounterReceiver];

Provider

Provider does not differ only in names.

Redux

App.jsx

import React from "react";
import { Provider } from "react-redux";
import store from "./store";
import Toolbar from "./components/Toolbar";
import Counter from "./components/Counter";

export default function App() {
    return (
        <Provider store={store}>
            <div>
                <Counter />
                <Toolbar/>
            </div>
        </Provider>
    );
}

Eventrix

App.jsx

import React from "react";
import { EventrixProvider } from "eventrix";
import eventrix from "./store";
import Toolbar from "./components/Toolbar";
import Counter from "./components/Counter";

export default function App() {
    return (
        <EventrixProvider eventrix={eventrix}>
            <div>
                <Counter />
                <Toolbar/>
            </div>
        </Provider>
    );
}

Dispatch

Redux handles the actions we pass to dispatch. Eventrix has events that are emitted by emit. Events, unlike actions, can be received by components if they register to them. This is how we enable communication between components. Method emit returns a promise waiting for all async receivers and listeners to be called. Thanks to this, you can handle the end of an event in the component.

Redux

components/Toolbar.jsx

import React, { useCallback } from "react";
import { useDispatch } from "react-redux";

const Toolbar = () => {
    const dispatch = useDispatch();
    const increaseCounter = useCallback(() => {
        dispatch({ type: 'increaseCounter' });
    }, [dispatch]);
    return (
        <button onClick={increaseCounter}>Increase counter</button>
    );
};

export default Toolbar;

Eventrix

components/Toolbar.jsx

import React, { useCallback } from "react";
import { useEmit } from "eventrix";

const Toolbar = () => {
    const emit = useEmit();
    const increaseCounter = useCallback(() => {
        emit('increaseCounter');
    }, [emit]);
    return (
        <button onClick={increaseCounter}>Increase counter</button>
    );
};

export default Toolbar;

Eventrix - async

components/Toolbar.jsx

import React, { useCallback } from "react";
import { useEmit } from "eventrix";

const Toolbar = () => {
    const emit = useEmit();
    const fetchCounter1 = useCallback(() => {
        const counterId = 1;
        emit('fetchCounter', { counterId }).then(() => {
            console.log('counter fetched');
        });
    }, [emit]);
    return (
        <button onClick={fetchCounter1}>fetch counter 1</button>
    );
};

export default Toolbar;

State

Redux handles state change in components with useSelector. Eventrix handles this with useEventrixState. The main difference is in use and action. In terms of operation, selectors are called whenever dispach is called and redux checks if the component should rerender. Eventrix rerender component only when the change relates to the state for which the component has registered.

Redux

components/Counter.jsx

import React from "react";
import { useSelector } from "react-redux";

const counterSelector = (state) => {
    return state.counter;
};

const Counter = () => {
    const counter = useSelector(counterSelector);

    return <div>{counter}</div>;
};

export default Counter;

Eventrix

components/Counter.jsx

import React from "react";
import { useEventrixState } from "eventrix";

const Counter = () => {
    const [counter, setCounter] = useEventrixState('counter');

    return <div>{counter}</div>;
};

export default Counter;