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

useFetchToState

This hook fetch data and put it to state.

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.

This hook is not recomended. Please use fetchToStateReceiver if You can.

import React from 'react';
import axios from 'axios';
import { useFetchToState } from 'eventrix';

const removeUserFetch = (userData, state, emit) => {
    return axios.delete(`http://somedomain.com/users/${userData.id}`).then(() => {
        return state.users.filter(item => item.id !== userData.id);
    });
}

const DeleteUserButton = ({ user }) => {
    const [emitFetch] = useFetchToState('users:remove', 'users', removeUserFetch);
    
    const removeUser = useCallback(() => {
        emitFetch(user);
    }, [emitFetch, user])
    
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}
import axios from 'axios';
import { useFetchToState } from 'eventrix';
import { EmitI } from 'eventrix/types/interfaces'
import { User, StoreState } from './interfaces';

const removeUserFetch = (userData, state, emit): Promise<User[]> => {
    return axios.delete(`http://somedomain.com/users/${userData.id}`).then(() => {
        return state.users.filter(item => item.id !== userData.id);
    });
}

interface PropsI {
    user: User;
}

const DeleteUserButton = ({ user }: PropsI) => {
    const [emitFetch] = useFetchToState<User>('users:remove', 'users', removeUserFetch);
    
    const removeUser = useCallback(() => {
        emitFetch(user);
    }, [emitFetch, user])
    
    return (
        <button onClick={removeUser}>
            Remove user
        </button>
    );
}
PrevioususeEventStateNextuseReceiver

Last updated 3 years ago

Was this helpful?