# Redux -> 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.

{% tabs %}
{% tab title="Redux" %}
{% code title="store.js" %}

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

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

{% endcode %}
{% endtab %}

{% tab title="Eventrix" %}
{% code title="store.js" %}

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

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

{% endcode %}
{% endtab %}
{% endtabs %}

### 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**.**

{% tabs %}
{% tab title="Redux" %}
{% code title="reducers.js" %}

```javascript
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 });
```

{% endcode %}
{% endtab %}

{% tab title="Eventrix" %}
{% code title="receivers.js" %}

```javascript
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];
```

{% endcode %}
{% endtab %}

{% tab title="Eventrix (good practices)" %}
{% code title="receivers.js" %}

```javascript
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];
```

{% endcode %}
{% endtab %}

{% tab title="Eventrix - async" %}
{% code title="receivers.js" %}

```javascript
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];
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Provider

Provider does not differ only in names.

{% tabs %}
{% tab title="Redux" %}
{% code title="App.jsx" %}

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

{% endcode %}
{% endtab %}

{% tab title="Eventrix" %}
{% code title="App.jsx" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Redux" %}
{% code title="components/Toolbar.jsx" %}

```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;
```

{% endcode %}
{% endtab %}

{% tab title="Eventrix" %}
{% code title="components/Toolbar.jsx" %}

```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;
```

{% endcode %}
{% endtab %}

{% tab title="Eventrix - async" %}
{% code title="components/Toolbar.jsx" %}

```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;
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Redux" %}
{% code title="components/Counter.jsx" %}

```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;
```

{% endcode %}
{% endtab %}

{% tab title="Eventrix" %}
{% code title="components/Counter.jsx" %}

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

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

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

export default Counter;
```

{% endcode %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eventrix.gitbook.io/eventrix/migration/redux-greater-than-eventrix.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.