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

useReceiver

This hook added receiver to eventrix in component. When component did mount receiver is added to eventrix. When component will unmount receiver will be removed from eventrix.

If You want use hooks, hocs or component decorator You must use EventrixProvider in Your application. Go to "EventrixProvider" page in "Context" section for more details.

import React from 'react';
import axios from 'axios';
import { useReceiver, useEmit } from 'eventrix';

const DeleteUserButton = ({ user }) => {
    const emit = useEmit();
    useReceiver(
        'users:remove',
        (eventName, userData, stateManager) => {
            return axios.delete(`https://some.com/${userData.id}`).then(() => {
                const users = stateManager.getState('users');
                const newUsersList = state.users.filter(item => item.id !== userData.id);
                stateManager.setState('users', newUsersList);
            });
        }
    );
    
    const removeUser = useCallback(() => {
        emit('users:remove', user);
    }, [emit, user])
    
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}
import axios from 'axios';
import { useReceiver } from 'eventrix';
import { EmitI } from 'eventrix/types/interfaces'
import { User, StoreState } from './interfaces';

interface PropsI {
    user: User;
}
const DeleteUserButton = ({ user }: PropsI) => {
    const emit = useEmit();
    useReceiver<User>(
        'users:remove',
        (eventName, userData, stateManager) => {
            return axios.delete(`https://some.com/${userData.id}`).then(() => {
                const users = stateManager.getState<User[]>('users');
                const newUsersList = state.users.filter(item => item.id !== userData.id);
                stateManager.setState<User[]>('users', newUsersList);
            });
        }
    );
    
    const removeUser = useCallback(() => {
        emit('users:remove', user);
    }, [emit, user])
    
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}
PrevioususeFetchToStateNextuseFetchState

Last updated 3 years ago

Was this helpful?